All things Shopify and commerce
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?
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:
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.
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:
<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>
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;
}
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025