Venue - Header - Create a mega menu (up to v9.0)

Safe as Milk themes come with the ability to add a multi-column nested navigation (Mega Navigation). This enables one or more of the links in your main menu to become a trigger to open a multi-column mega navigation. You can group products, collections, or pages together to make it easier for customers to navigate your online store.

You can also add an image and text to your 'Mega Navigation' to promote certain products, collections and landing pages.

Headings are not clickable

NB - The first links/headings are not clickable if they have sub links (if they don't have sub links they will be clickable). This is because if the first links were clickable on mobile view it's a frustrating experience as the user thinks they are opening a sub menu but in fact the header/trigger link would just open a collection page. There would be no way to open sub menus.

Pro tip: We recommend that you make the first sub link into an 'everything' type link - so if the header is 'Tees & knits' then make the first sub link 'All tees & knits' then add the rest of your tees & knits sub links below that. You can see that in action here https://venue-theme-morning.myshopify.com/

Creating a nested menu in the admin

1. Head to the navigation area of your Shopify admin https://myshopify.com/admin/menus
2. Create a new menu called 'My Mega Nav' or similar (or edit an existing menu) 
3. Add your most important links to the new 'My Mega Nav' menu using the editor - typically links such as as 'Store' 'About us' 'Blog' 'Contact us'. If you need more guidance on menus please refer to this page in the Shopify Help Centre.
4. Choose one of the menu items to be the header/trigger for your Mega Navigation menu - usually 'Store' or similar.
5. Add menu items to include in the new 'Store' drop-down menu. Click 'Add menu item', enter the name of the menu item, and enter or select a destination for the link.
6. Click and drag the menu items to nest below THAT header item (see the GIF below)

7. Click Save menu.

   
   
   

   

   
   

 Adding your new nested menu to your store

1. Head to the themes area of your Shopify admin https://myshopify.com/admin/themes
2. Click the Customize button to open the theme editor
3. Click on the Header section on the panel on the left.
4. Under the Menu area select the new dropdown you have created - in this case 'My Mega Nav'
5. Enable the Mega Navigation feature by clicking the checkbox (see image below).
6. Click the Save button to save your changes
7. Check the dropdown is working as expected.

Adding image and text to your multi-column nested menu

You can add an image and text to your 'Mega Navigation' to promote certain products, collections and landing pages. You can see that in action here  https://venue-theme-morning.myshopify.com/

You have lots of options here.

• Image - 600px width recommended. This is great for 'Sale' style graphics
• Image link - You can turn the whole of the image into a clickable link
• Heading - You can add a heading below the image, so it looks like a blog post
• Text - As above
• Link label  - you can add a 'Learn more' style text link with arrow
• Link - where you want the text link to link to.

An example of menu structure

The mega navigation that you can see that in action here  https://venue-theme-morning.myshopify.com/ was created like this in the admin.

Image sizes

Please see the related article linked below to learn more about image sizes.