What is a mega menu?
A mega menu is a navigation menu that neatly organizes many links and categories and is a great way to organize complicated menu structures. Using the correct menu layout will allow your customers to easily find the desired products or collections and should help with conversions.
Symmetry supports a full-width mega menu to provide customers with quick and easy storefront navigation. It offers both simple dropdown menus and full width menus with text and images.
How to set up a mega menu
Steps
- If you have not already done so, create a nested menu in the Shopify admin area: Online Store > Navigation. Read How to set up drop-down menus for more. To create a mega menu like the screenshot above, ensure you have a Multi-Layer structure. Meaning you have heading layer 1, heading layer 2 & menu links inside layer 2.
- Make sure you follow the above system. Do not add 2 layers otherwise your menu won't look like how it does in our demos.
- Open the Theme Editor, and click on the Header section.
- Pick the main navigation menu in the Menu setting within the Navigation area of the settings.
- Choose the Menu alignment. Left, Center or Underneath. The alignment will switch to Underneath if the links do not fit beside the logo.
- Choose a Featured link. Enter the title of a link to highlight it in a different color, for example, 'Sale'. Separate with commas if more than one link is required. Set the color in Theme settings > Colors > Featured link color.
How to set up menu promotions
Two types of menu promotion can be created within your main navigation menu. These images are attached to individual menu items and can be used to draw attention to specific promotions.
Steps
- Open the Theme Editor, and in the Header Group open the Header section.
- Click Add block and select either a Small menu promotion or a Wide menu promotion. Combining small and wide promotions can create a rich, engaging navigation menu.
- Wide menu promotions make use of the browser real estate. Use them to promote something special.
- Small menu promotions are small adverts that sit within the navigation grid. Use them to promote new collections, sales or announcements. Choose a vertical column or carousel layout for small menu promotions on mobile using the Mobile navigation setting Enable carousel layout for menu promotions.
- Small menu promotions can also be used to create an image-only navigation. Add a single heading link (e.g. BRANDS below) in your Online Store > Navigation > Main Menu, and set up four small menu promotions.
How to set up the mobile menu
Symmetry offers the possibility of a distinct mobile menu to ensure an uncluttered and sleek design on smaller screens. The theme also includes settings to control the mobile menu link behaviour, crucial to guide customers quickly through your store. Further customize the mobile experience by showing additional featured products at the bottom of the mobile menu.
Steps
- Open the Theme Editor, and click on the Header section.
- To show a different menu to customers using mobile devices, pick a Mobile menu within the Mobile navigation area of the settings. If no menu is added here then the main Menu selected in the settings above will be used.
- Control the mobile navigation behaviour for parent links using the setting Enable parent link to open dropdown menu. (versions after 7.0.0) A 'parent link' is a link which has links nested underneath it. Choose whether tapping this link on mobile will open the next layer of the menu or be used for navigation to another page. Tapping the arrow next to the link will always open the next menu layer.
- A carousel of featured products can be shown under the mobile menu links. Create a single layer menu containing direct links to products by going to the Shopify admin area and choosing Online Store > Navigation > Add menu. Select Enable featured products and choose the Featured products title. A great way to highlight some best sellers or sale items directly in your mobile navigation.
- Additional quick links added in the announcement bar will be shown at the bottom of the mobile menu. Refer to the announcement bar guide.
FAQs
Why are my menu promotions not showing?
Make sure to enter the exact name of your top-level link, in the link name input.
Why is my active link underline showing on more than one link?
Your main navigation menu will show an underline beneath the active link or when it is hovered over. The only other instance when an underline appears is when the assigned URL points to your home page. As an example, the navigation items in the below screenshot all point to the homepage:
Tip
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us