Skip to Content

Header options + social media icons

By: 18th January 2025

Video

If you open the video on Youtube, you can find the chapters of the different settings in the description.

Header styles

All the header options are in the Customizer (Theme settings in WP) -> Minimalio options -> Header

There are many options when it comes to header in Minimalio. You can have a horizontal header, with menu on right, in the center or underneath the logo. You can also use the burger icon for menu even on desktop view. And there is a also the vertical header. Please, take a look at the video to see how to set these up.

Burger icon as a menu

If you want to use the burger icon/mobile menu even on bigger screens, that is done in the Customizer (Theme settings in WP) -> Minimalio options -> Mobile menu and set the Breaking point to a very high number, for example 4096. This way, the mobile menu will appear even on bigger screens.

Setting logo

You can choose your logo in the Customizer (Theme settings in WP) -> Site Identity. There you can choose your logo. In the Minimalio options -> Header, you can set the width of your logo.

Fixed header

Fixed header is the option, that if you scroll down on your website, the header will stay on top of it. You can also change the colors of your fixed header, underneath the header colors.

Transparent header

If you want, you can make your header float over your content. You might also want to do that only on the homepage, or on your single portfolios.

Header colors and menu items style

Choose the header background, menu color and hover color. You can also have different style of the menu items, when you hover over them or when they are active.

Submenus

Choose the colors of your submenus. There is also a special option of leaving the submenu open on the active page, that could be very nice on the vertical header style.

Social media

Set your social media in Customizer (Theme settings in WP) -> Minimalio options -> Social media. Simply choose if you want to show them in header or footer or both. And fill in the url of your desired social media.

Transcription of the video

Hi there! Today, I’d like to talk about the header. The header is a key design element that significantly influences the look and feel of your page. Since there are many options in Minimalio, this might be a bit long, so feel free to check the chapters on YouTube if you want to skip to specific sections.

There are several header styles available in Minimalio:

  1. Default Header: The classic setup with the logo on the left, the menu in the center, and social icons on the right.
  2. Full-Width Header: The same as the default, but it stretches to the edges of larger monitors.
  3. Centered Menu: The logo is on the left, with the menu centered and social icons on the right.
  4. Menu Below Logo: The menu is displayed underneath the logo.
  5. Vertical Header: All header elements are on the left side, giving the page a unique vertical layout.
  6. Burger Icon (Compact Menu): This option hides the menu behind a burger icon, even on desktop devices. The menu can either cover the whole page or slide out from the side.

To set up these header styles, navigate to ‘Customizer’ > ‘Minimalio Options’ > ‘Header’. You can switch between horizontal and vertical headers with a single click. You can also choose whether the header stretches across the screen or remains a fixed width.

For more advanced options, like setting a breaking point for when the burger icon appears, go to the ‘Mobile Menu’ settings. You can define the screen size at which the burger icon activates. This is particularly useful if you have a large menu and want to avoid it breaking on smaller screens.

The logo in Minimalio defaults to the site name unless you upload a custom image in ‘Site Identity’. You can adjust the size of the logo easily to match your design.

Additional header features include:

  • Fixed Header: Keeps the header visible at the top as you scroll down the page. You can also set different colors for the fixed header state.
  • Transparent Header: This is great for homepages with large videos or images. You can apply it only to the homepage or across all pages.
  • Custom Colors: You can adjust menu colors, hover effects, and the active link decoration (e.g., underline or line-through).
  • Font and Spacing: You can change the font size, style (e.g., italic), and letter spacing of the menu items.
  • Submenu Behavior: If you have a vertical header or specific use cases like portfolios, you can keep submenus open on the parent page.
  • Social Icons: Add social media links in ‘Customizer’ > ‘Social Media’ and choose where they display (header, footer, or both).

I hope this guide helps you explore and customize your header options in Minimalio. Thanks for watching!