The following article contains information about setting up the Mega Menu feature. The Mega Menu is available in Responsive version 7.0! If you're on an older version of Responsive and would like to use this new feature, you will need to update your theme.
The Responsive theme's Mega Menu
The new Mega Menu in Responsive is a great way to highlight or expand on certain categories and collections. Mega menus allow your customers to easily navigate through products and collections quickly and are useful if you're looking to categorize by vendor or brands too!
In This Article
Creating a Mega Menu
When creating a mega menu, you will first need to create a menu in your Navigation page (from your Shopify Admin > Online Store > Navigation). The number of columns in your mega menu is determined by the number of menu items you wish to add!
You can have up to 10 columns in the mega menu.
To create a column, add a menu item. You can then build out each column by making a 'dropdown' menu item with Shopify's nested navigation.
When you've added all of your menu items/columns - your menu will look something like this:
Adding the mega menu in your theme editor
Once you've created your menu in the Navigation settings, you'll need to then apply it in the theme editor under the Header category. Head into Customize > under Sections > Header > scroll down to Navigation > Content > Add mega menu.
Add in your Link Title. The mega menu will appear below this parent link. If you'd like your mega menu to appear below your 'Shop' menu link, you will name the link title 'Shop'.
Then, select the menu that you've created for your mega menu:
After 5 columns, you can scroll through the mega menu to reveal the rest of the columns!
Additional Mega Menu Settings
Within the mega menu, you have the ability to add in a Content Column and a Bottom Banner.
Content Column
Within the Content Column, you can upload an image, text, and URL (which will link the image and text). You also have the ability to choose the position of where you would like this content column to be placed within your mega menu (first column or last column).
Keep in mind that the max amount of columns in a mega menu is 10. If you'd like to enable the Content Column, you'll need to make sure that your menu has less than 10 columns to begin with!
Bottom Banner
Within the mega menu, you can enable a bottom banner! You can add text, and a link while choosing the background and text colors in this area as well:
This is a great way to announce "new arrivals" or to mention a specific sale!
Mobile Layout
On mobile, the mega menu updates to be a dropdown menu with each column updated to a dropdown menu as well. Your content column and bottom banner will remain here as well if you have enabled them!
