Vantage Theme: Setting up the Navigation w/ Dropdown Menu
Vantage includes a Sticky Navigation that will show up to 3 Levels of Dropdown Navigation and optional megamenus
When planning your navigation items, it helps to create an outline showing the navigation hierarchy. For this example, the navigation hierarchy was set up as shown.
Navigation setup
In your Shopify admin go to Online Store > Navigation click on Main Menu.
First, add your Level 1 menu items, followed by your Level 2 menu items, carefully positioning them inside the Level 1 items using the drag and drop interface.
If you have Level 3 menu items, create them and position them inside the Level 2 items using drag and drop.
Click Save... Your nested navigation should now match your planned navigation hierarchy.
Megamenus
A megamenu is simply a 3 level dropdown menu ( as shown above ) but styled to display a multi-column layout.
Level 1 is your top-level navigation, Each Level 2 link represents a column, and each Level 3 link represents the links within that column.
If your navigation does not have 3 levels of links then the megamenu is not going to work for your needs and should not be added.
- In your Shopify admin go to Online Store > Themes click the Customize theme button next to your theme to load the Shopify theme editor.
- In the Shopify theme editor click on the Sections tab and select Header.
- In the Content, area select Add links in columns.
- In the Menu Item field enter the title of the menu item from which you would like to see a megamenu dropdown - this must match the case used when entering this into your store admin.
In the below example we entered Shop. As the menu contains a link named Shop the mega dropdown will appear when this is hovered. - Optionally upload a featured image that will be displayed and add a link to it.
- Click save when complete