This guideline helps you create the header menu with Base Item, Dropdown Item and Mega menu Item.
Go to Header inline > Add block > choose a block that you want.
1. Base Item
This is a simple menu item, you can choose the URL to redirect when the customers click on the item.
2. Dropdown Item
With Dropdown Item, it allows you to select only one menu to show as a dropdown.
You need to create the menu in Online Store > Navigation:
Note: Shopify allows you to create a Navigation up to 3 levels, so the maximum level for dropdown is 3.
This is dropdown layout in Kalles, Ocolus theme (sub-menu on the right side)
This is dropdown layout for Gecko, Unsen theme (sub-menu under the parent item)
3. Mega item
Mega menu is a type of expandable menu in which multiple choices are displayed in a drop-down layout. It is a great design choice to accommodate a large number of options or to display lower-level pages that appear in the menu Header.
3.1. Example
This is an example of a mega menu:
To create a mega menu with 5 columns above, you follow these steps:
Step 1: Hide/Remove the exit items to build your own menu => Video guide 1
Step 2: Create 'Mega menu' for Shop
Connect the same ID for Mega menu (Parent) and add some child blocks such as Linklist (Child) or Collection(Child), etc.. => Video guide 2
Step 3: Adjust the Width (Col) and order of the items => Video guide 3
3.2. Connect Header Inline and Mega Menu
To create Mega menu, you need to connect the Mega Item of Header Inline and Mega Menu(Parent) of the Mega Menu by choosing the same ID.
There is a total of 16 IDs here, from #1 to #16. It means you can create up to 16 mega menus.
For example, Header Inline: Mega Item - SHOP - the ID to connect is #2;
The Mega Menu: Mega Menu (parent) to connect with this header needs to set ID #2.
3.3. How to add content for Mega menu?
To add content to Mega menu, please put the child blocks below Mega Menu (Parent).
Mega menu has many child blocks, click Mega menu > Add block:
Mega Menu (Parent)
Linklist (child), Linklist 2 ( child )
Product (child), Collection (child)
Banner (child), Blogs (child)
HTML (child)
You can check this video below to know more about these child blocks:
You can drag blocks to arrange them:
4. Header section settings
Click on HEADER section, there are many options for you to config the header.
Header layout: choose different position of logo, search form, and menu. You can check video below to know more:
Config Header height on desktop, tablet and mobile.
Main menu align, Hover effect for the menu
4.1. HEADER COLORS
Config background color, text color, etc...
4.2. HEADER GROUP BUTTONS
Choose design icon, enable/disable search, account, wishlist icons, cart style.
If you tick "Show account icon" but the icon still not show, please go to Shopify Settings > Customer accounts > enable “Show login link in the header of online store and at checkout”:
4.3. STICKY HEADER
Sticky header always shows when you scroll up/down the page. Please check this video to know more about Sticky header.
4.4. TRANSPARENT HEADER
The background of the header becomes transparent with the background of the section behind it.
