Navigation menu - Mega menu on some tabs and drop down on others

Shopify Discussion
1

Hey, I am wanting to add a mega menu for some of my navigation tabs that have lots of other categories but have drop down on the tabs with less. What do I need to code for this?

2

Hi @harryberkeley

I get what you’re trying to do—you want a mix of a mega menu for categories that need more space and a regular dropdown for simpler tabs. This is definitely doable with some custom coding in Shopify’s theme files. Here’s how to make it work:

Step 1: Identify Your Theme and Check if It Supports Mega Menus

First, check if your Shopify theme already has built-in support for mega menus. Some themes (like Dawn, Empire, and Prestige) offer this feature natively. If your theme supports it, you can set up mega menus from Online Store > Navigation without coding.

If not, you’ll need to modify your theme’s Liquid files.

Step 2: Locate the Navigation Code- Go to Online Store > Themes > Actions > Edit Code.

  • Open the header.liquid or navigation.liquid file (depends on your theme).

Step 3: Modify the Code to Support Both Mega Menu & Dropdowns

You’ll need to adjust the Liquid and CSS to conditionally apply a mega menu to certain tabs while keeping others as regular dropdowns.

Here’s an example of how you can structure the navigation in header.liquid:

  • Define the Navigation Structure in Liquid

    {% for link in linklists.main-menu.links %}

    {% if link.title == ‘Shop’ or link.title == ‘Collections’ %}

  • {{ link.title }}

    {% for sublink in linklists[link.handle].links %}

    {{ sublink.title }}

    {% endfor %}

    • {% else %}

  • {{ link.title }}

    • {% endif %}

    {% endfor %}

  • The mega menu applies to specific tabs (e.g., “Shop”, “Collections”).
  • Other tabs use a regular dropdown.

Step 4: Add CSS for Styling

You’ll also need to style them differently in theme.css or base.css:

/* Mega Menu */

.mega-menu {

position: relative;

}

.mega-dropdown {

display: none;

position: absolute;

width: 300px; /* Adjust width as needed */

background: #fff;

box-shadow: 0px 4px 8px rgba(0,0,0,0.1);

}

.mega-menu:hover .mega-dropdown {

display: block;

}

/* Regular Dropdown */

.dropdown {

position: relative;

}

.dropdown-menu {

display: none;

position: absolute;

background: #fff;

box-shadow: 0px 4px 8px rgba(0,0,0,0.1);

}

.dropdown:hover .dropdown-menu {

display: block;

}

Step 5: Test & Adjust- Go to your store’s navigation, hover over the tabs, and check if the mega menu appears for selected tabs while dropdowns work for others.

  • Adjust the width and styles based on your design.

This method gives you control over when to use a mega menu and when to keep things simple with a dropdown. Let me know if you need help tweaking it!

If you need any other assistance, I am willing to help.
Best regards,
Daisy.