What is a mega menu?
A mega menu is a full width navigation menu that neatly organizes many links and categories. It is a great way to organize complicated menu structures and helps customers to find their desired products and collections quickly and easily. Showcase supports a full-width mega menu and menu promotions as well as standard dropdown menus.
For further information about the header behavior - choosing whether the header sticks on scroll, or changes color - see our guide How to set up the header section.
How to set up a mega menu
- Create a nested menu in the Shopify admin area's Online Store > Navigation section. Read How to set up drop-down menus for more information.
- Ensure all of the links in that menu have 3 levels. If only some of the links have three levels, the menu will be displayed as a standard dropdown rather than a full width mega menu. On larger screens the second level is displayed as a column heading.
- Open the Theme Editor, click on the Header section and select the menu to use.
How to add images to the menu
Showcase has the ability to add promotional images to two layer dropdown menus and mega menus. Promotions are a great way to highlight certain products, collections, or special sales. Keep promotions short and snappy and contextually relevant to the menu they're being shown in.
- Open the Theme Editor and select the Header section.
- Choose Add menu promotion to add a menu promotion block.
- Enter the top level Menu item under which you show an image, or, to show the image on the first level of the burger menu popup, leave the Menu item field blank.
- Add your promotional images, text and links.
Why is my menu not showing as a full width mega menu?
If the menu is showing a standard dropdown instead of a full width mega menu then it's worth checking that every link in the menu item has child links. If only some of the menu items have 3 layers and some only two layers then a standard dropdown menu is used instead.
The burger menu is shown on smaller screens where there isn't enough space to show a horizontal line of links. This may be the layout seen in the Theme Editor as the settings sidebar takes up screen space.
Why isn't my promotional image showing?
Double-check that the link name you’ve entered matches the link's name as it appears in the Online Store > Navigation page of the Shopify admin area. Sometimes link names could be in a different case, or have a space at the end or beginning, both of which would need to be reflected in the settings.