Tame Your Shopify Mega Menu: How to Make Dropdowns Compact and Content-Aware

Hey store owners!

Let's talk about something that can really polish up your store's navigation: those mega menu dropdowns. We've all seen them – big, beautiful, sometimes spanning the entire width of your page. While that can be cool for certain designs, it's not always what you want, especially if your sub-menu items are short and sweet.

Just recently, a store owner named Sierra_Covell1 brought this exact issue to the Shopify community. Sierra was using the Feather theme (a popular variant of Shopify's default Dawn theme) and noticed that when a menu item with sub-menus was clicked, the dropdown would stretch across the entire page, pushing the sub-menu items far to the left. What they really wanted was a more compact dropdown, one that was just wide enough to contain the longest item name and appeared directly under the parent item.

Understanding the Mega Menu Default

This is a super common scenario. Many modern Shopify themes, especially those built on the flexible Dawn architecture like Feather, are designed with a full-width mega menu by default. It's a design choice that works well for stores with extensive product categories or a lot of content to showcase in their navigation. However, it can feel a bit overwhelming if you only have a few sub-menu links.

As the community pointed out, this behavior is typically controlled by your theme's CSS rather than a simple toggle in your Shopify admin settings. While it's always worth checking your theme's customization options (Online Store > Themes > Customize > Header) for menu layout choices like "Mega Menu," "Dropdown," or "Compact," often, the specific granular control Sierra was looking for isn't built-in.

If your theme is from a third-party developer, it's also a good idea to consult their documentation or reach out to their support. They might have a specific setting or a code snippet readily available for this kind of layout adjustment.

The Community's Solution: A CSS-Powered Compact Dropdown

In Sierra's case, and for many of you using Dawn-based themes, the solution lies in a bit of custom CSS. A fantastic member of the community, Ploqo, stepped in with a complete, step-by-step guide to transform that sprawling mega menu into a neat, content-aware dropdown. Here's what it looks like before and after the fix:

Before: The Full-Width Mega Menu

After: The Compact, Under-Item Dropdown

Step-by-Step Instructions to Implement the CSS Fix

Ready to make this change on your own store? Here's how to do it. Remember, it's always a good practice to duplicate your theme before making any code edits, just in case!

1. Open your theme code:
   • From your Shopify admin, go to Online Store > Themes.
   • On your current theme, click the ... button (Actions), then select Edit code.

   

2. Paste the code into base.css:
   • In the left-hand sidebar, under the Assets folder, open the file named base.css.
   • Scroll to the very bottom of this file.
   • Paste the following CSS code block there.
   • Click Save.

   /* Compact submenu dropdown - fits its content, sits under the parent */
   .header-wrapper .header__inline-menu .mega-menu {
     position: relative;
   }
   .header-wrapper .header__inline-menu .mega-menu__content {
     left: 0;
     right: auto;
     width: max-content;
     min-width: 16rem;
     max-width: 90vw;
     padding: 1.5rem 0;
     border: 0.1rem solid rgba(var(--color-foreground), 0.1);
     border-top: 0;
     box-shadow: 0 1rem 2rem rgba(var(--color-foreground), 0.12);
   }
   .header-wrapper .header__inline-menu .mega-menu__list {
     display: block;
     width: auto;
     max-width: none;
     margin: 0;
     padding: 0 2rem;
     gap: 0;
   }
   .header-wrapper .header__inline-menu .mega-menu__list > li {
     width: auto;
     padding-right: 0;
   }
   .header-wrapper .header__inline-menu .mega-menu__list > li + li {
     margin-top: 1rem;
   }
   .header-wrapper .header__inline-menu .mega-menu__link {
     white-space: nowrap;
   }
   

   

3. You're done!
   • Reload your store in a new browser tab or clear your cache.
   • Open your menu, and you should now see the compact dropdown sitting neatly under its parent item.

Customizing the Dropdown Width

Ploqo's solution is quite robust, but you have a little flexibility to fine-tune it:

• The line min-width: 16rem; sets the smallest possible width for your dropdown panel. If you want it a bit wider even for short items, increase this value (e.g., 20rem). If you want it even tighter, you can decrease it. The panel will still grow automatically to accommodate your longest menu item.
• The max-width: 90vw; ensures that even if you have a ridiculously long menu item, the dropdown won't overflow off smaller desktop screens. This is a smart safeguard!

A Pro Tip for Long Menu Items

VikashJ, another helpful community member, chimed in with a valuable insight regarding a potential future adjustment. The CSS includes white-space: nowrap; on the .mega-menu__link class. This is what keeps your menu items on a single line, preventing them from wrapping.

While this is great for maintaining a clean, compact look, if you ever add a sub-menu item with a genuinely long name (say, a 40+ character product category), that white-space: nowrap; combined with the max-width: 90vw; could cause it to wrap awkwardly or get clipped once it hits that ceiling. If you encounter this, a simple fix would be to relax white-space: nowrap; to white-space: normal; for that specific link (or adjust the max-width) so it wraps cleanly onto a second line instead of getting cut off.

It's a small detail, but knowing these nuances can save you headaches down the line! This kind of community collaboration is what makes Shopify so powerful – real store owners helping each other create beautiful, functional online experiences. Happy customizing!