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

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

harryberkeley
Shopify Partner
5 0 0

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? 

Reply 1 (1)

DaisyVo
Shopify Partner
3794 412 499

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

<ul class="main-menu">

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

    {% if link.title == 'Shop' or link.title == 'Collections' %} 

      <li class="mega-menu">

        <a href="{{ link.url }}">{{ link.title }}</a>

        <div class="mega-dropdown">

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

            <a href="{{ sublink.url }}">{{ sublink.title }}</a>

          {% endfor %}

        </div>

      </li>

    {% else %}

      <li class="dropdown">

        <a href="{{ link.url }}">{{ link.title }}</a>

        <ul class="dropdown-menu">

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

            <li><a href="{{ sublink.url }}">{{ sublink.title }}</a></li>

          {% endfor %}

        </ul>

      </li>

    {% endif %}

  {% endfor %}

</ul>

 

  • 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.

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution