Mega menu

A mega menu is an expanded and visually appealing menu that displays multiple navigation options and subcategories in a single dropdown panel.

A well-designed mega menu simplifies the browsing process for your customers.

• It provides a clear overview of your store's product categories and subcategories, allowing users to quickly find what they want.
• It reduces the number of clicks required to navigate through your site, enhancing user satisfaction and encouraging exploration of your product offerings.

#Create a mega menu

Give your menu a name and select the layout for it.

You can choose 1 of the 2 layout options for your mega menu. It can be:

• Horizontal menu: In a horizontal mega menu, the parent menu items stand at the top; and sub-items, or child menu items, spread out underneath them.

• Vertical menu: In a vertical mega menu, the parent menu items stand on the left side; and sub-items, or child menu items, branch out from them to the right.

Each submenu item can be chosen as:

• Pure text link: Link the item to a certain collection, product, landing page, etc.
• Text link with image banner: A menu banner can attract customers' attention and communicate your messages more effectively.

#General

• Title: Insert your menu item label;
• Link: paste the page URL or select a page from your Shopify store that you want to link the menu item with, or simply leave it blank.

• Check the option Open link in a new tab if needed.

#Submenu settings

• Determine your Submenu layout as Mega/Dropdown;

• Select how the submenu is opened: by hovering/clicking;
• Select the Dropdown container width: Full width/ Auto width;
• Enable to show content in the container if needed;
• Set the number of submenu columns: 1-6 columns or based on the number of submenu items being added to the menu item.

#Image Banner

This feature lets you create a visually appealing banner with an image, heading, button, and optional custom styling. It can be used to highlight promotions, collections, or announcements on your storefront.

• Image
• Image Width
• Heading
• Button Label
• Text Color
• Custom Class

#Icon & Badge

You can set the Icon and Badge for each menu item to attract customers or visitors' attention.

#Icon

The Icon will be positioned beside the menu item label.

Select your preferred icon in the Select icon field.

Then, adjust the Icon size to fit the menu item (10px-50px) and change the Icon color.

#Badge

The Badge will be positioned next to the menu item label.

Enable/Disable the Badge by toggling the Show badge option.

Insert the content you want in the Badge label to show on the menu item.

Then, you can also adjust the suitable Badge background color and Badge text color to highlight it.

#Visibility

Select in what view that menu item and submenu items are displayed.

#Style your mega menu

To change the styling of the mega menu, choose Appearance.

Some details of the mega menu that you can change are:

• Menu layout
  • Horizontal
  • Vertical
• Menu width
  • Fill container
  • Fixed width
• Menu bar background: Change color
• Menu text color
• Menu text hover color
• Space between items
• Submenu design
  • Background: Change color
  • Text: Change color
  • Text hover: Change color

#Change the settings of your mega menu

• Title
• Render method - we recommend you don't change this option if you're not sure what it does
  • Custom element
  • Replace by selectors
• CSS Selector
• CSS selector of mobile menu