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 "Bottom line separator" drop-down to add or remove the dividing line underneath the Header on desktop and mobile:
"Hide". Select the option to hide the dividing line on both desktop and mobile.
"Show". Set the option to display the separator on all screen sizes.
"Show on desktop only". Use the provided option to show the separator on the desktop and deactivate it on mobile.
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 "Cart counter" item determines the background color for the number of products displayed next to the cart icon in the Header when items are added to the Cart. The digit color will be adapted to contrast with the selected background color. To customize the digit color, go to Theme settings -> Colors -> Contrast and use the appropriate color picker.
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:
Text menu
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:
Icons menu
Tip: To customize the "Icons menu", enable the "Mega menu" sections in Theme settings -> Mega menus. Read more about the "Mega menu" section 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.
Menu type
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 color of the vertical line separator between the categories and search field in the Search bar can be modified using the "Search-categories border" color picker. This option works just for the Popup menu type.
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.
Popup menu
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.
Animation
Turn on the "Animate icon and text" option to create an animation effect that swaps the position of an icon/image with the menu item name when hovering over an icon menu. On hover, the menu item name moves to the top, and the icon/image shifts to the bottom. This feature is compatible with the Inline menu type.
Here is how the Header might display on a desktop and mobile:
Note! The menu items can be visible on mobile in the slide-out popup after hitting the menu button in the Header section.
Last updated
