Header
Last updated
Last updated
The header is a global section available on all pages of the theme. This section cannot be moved or hidden. The main purpose of this section is to provide the users with the ability to easily browse through the site. It is quite functional and have a number of features.
In the Header section there are the following options:
Color settings
You can change the background of the header and the color of the text. There's also an option to change the color of the small bubble numbers above the collection links, showing the number of products in the corresponding collection.
Enable full-width - The header can take the full width of the page (leaving small padding on the left and right), or be limited to the shell of the website.
Enable mega menu full width - same as above, but referring to the megamenu dropdown.
Enable sticky header - if checked, the header will stay sticky at the top of the page when scrolled.
Enable products counter - this setting enables the small number above the collection links, which shows how many products are in the collection.
Enable utility titles - if checked, the Account and Cart text will be shown next to the account and cart icons in the header.
Logo - the logo of the website can be changed from here. You can use image or SVG (by pasting the SVG code in Logo SVG Code).
Logo position - There are several options for the logo position:
Left
Center
Center with menu below (suitable for bigger navigations)
Logo width - separate settings for the logo width on desktop and mobile.
Menu - you can choose which navigation to be used for the main website navigation.
Menu secondary - this is a second navigation which shows when the main menu is positioned below the logo
If you want the header to be transparent on the homepage (the header will be above the hero image), you can do this by clicking the Enable Transparent on Home page checkbox.
You can separately set the color of the text and the logo settings when the header is transparent.
Once the page is scrolled, the header will receive the main color options.
In order to enable a megamenu for a specific item in the nav, you will first need to add a new Mega menu block in the header section and then will the Link level 1 field to be exactly the same as the nav item where the mega menu should show.
The inner links in the mega menu come from the Navigation itself and follow the same structure.
You can add up to 3 featured items per mega menu dropdown.
Every item has options for:
Image
Heading
Subheading
Link
