Header

The "Header" section contains settings to set up a menu at the very top of a page to match the look and feel of your store.

Tip: Check the extended list of options for Header in Theme settings -> Layout.

The Unicorn theme allows adding six blocks to customize the Header: "Menu icons", "Badges", "Popup menu", "Image with button (Mobile)", "Featured promotion (Mobile)", and "Contacts".

Header

If the option "Open dropdowns on click instead of hover" is enabled, the drop-down menu will only be available for viewing by clicking a menu item.

Note! The described option will only work for the inline Icons menu.

Use the "Show bottom line separator" option if you need the dividing line underneath the Header.

The background of the first Header line can be changed if you apply color to the "Background".

The icon's color, such as account, search, and bag, will be changed once you add a hex code for the "Buttons" item.

The theme allows displaying two menu lines that can be picked in the "Text menu" and "Icons menu" selectors. Let's dive into the topic more:

Here you can choose the proper menu in the "Secondary navigation" selector. It will be placed in the first header line above the Icons menu. Press the "Select menu" button to use the one from the list. Confirm that the menu has been created in Shopify admin -> Online Store -> Navigation. Read the instructions on how to add drop-down menus in the initial documentation.

Use the "Text" and "Hover text" color pickers to set up the colors of the active and inactive menu items.

This is how the "Text menu" might be displayed in your store:

Tip: To customize the "Icons menu", enable the "Mega menu" sections in Theme settings -> Mega menus. More about the "Mega menu" section, you can read in the following article.

In the "Main navigation", choose the menu for the icons drop-down. The Main Menu will be shown by default, which you can replace with any other menu created in Shopify admin -> Online Store -> Navigation. Read the instructions on how to add menus here.

Use the following picker to change the layout of the Icons menu on the desktop. It can be changed to display as the "Inline" or "Popup".

Here are the examples of the menu types:

To display the dividing line between the main menu and the secondary menu, activate the "Show top separator line" option.

Here you can change the color of the elements, such as: "Text", "Icon", "Background", "Border", "Hover text", and "Border and hover background".

The "Border radius" scale allows controlling whether to use square corners for the Icons menu or display rounded angles. Use from 0 to 40 pixels to set the value for the icons menu that satisfies your needs.

If you need to show the border for the icon boxes, use the "Border width" scale from 0 to 10 pixels.

Align to button

Activate the option to showcase the popup menu beneath the "Categories" button by clicking on it. Otherwise, the popup will cover the button when opened.

In the following example, the option is disabled and the popup overlays the "Categories" button:

Enable full width

Activate the option to display the Mega menu that includes nested menu items or banners in the full width of the menu.

Height

Use the following slider to set the height of the opened menu from 0 to 1000 pixels. If you leave the default value at 0 pixels, the height will be adjusted automatically.

Here is how the Header might display on a desktop and mobile: