Sub Menu Drop dropdown width

Technical Q&A
1

I’m using the Feather template and have the mega menu on desktop set up. When you click on a menu item that has sub menus, the drop down is the entire width of the page and the sub menus appear all the way over to the left. I really want the drop down to be smaller (wide enough to just contain the largest name) and appear directly under the item you clicked on.

2

Hey @Sierra_Covell1

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Your Feather theme is built on Dawn,

Dawn’s mega menu:

Before - the dropdown opens at full page width
Before - the dropdown opens at full page width1420×556 141 KB

After applying the CSS Fix:

After - compact dropdown, directly under the menu item
After - compact dropdown, directly under the menu item1420×556 135 KB

Steps:

1. Open your theme code

  • Online Store > Themes.
  • On your theme click the ... button, then Edit code.

Online Store > Themes > ... > Edit code
Online Store > Themes > ... > Edit code1040×328 94 KB

2. Paste the code

  • Under Assets, open base.css.
  • Scroll to the very bottom, paste the code below, then 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;
}

Paste the code at the bottom of base.css, then Save
Paste the code at the bottom of base.css, then Save1278×640 167 KB

3. Done

  • Reload your store and open the menu. The dropdown is now compact and sits under the item.

To adjust

  • min-width: 16rem sets the smallest width. Raise it for a wider panel, lower it for a tighter one. The panel still grows to fit your longest item.
4

That’s a solid, complete fix - exactly the right target (mega-menu__content) and a nice touch keeping max-width: 90vw so it can’t overflow on smaller desktop screens either.

One small addition worth knowing for later: if the store ever adds a sub-menu item with a genuinely long name (say, a 40+ character product category), the white-space: nowrap on .mega-menu__link combined with max-width: 90vw means it’ll wrap awkwardly once it hits that ceiling rather than staying on one line. Not an issue today, but worth remembering if a longer menu item gets added down the line - the fix at that point would just be relaxing white-space: nowrap to normal for that specific link so it wraps cleanly onto a second line instead of getting clipped.

Best,
Vikash Jha - Apploy

5

Hi @Sierra_Covell1

This is usually controlled by the theme rather than a Shopify setting. Many themes, including "Feather," use a full-width mega menu by design, so there may not be a built-in option to change it to a dropdown that’s only as wide as its content.

A few things to check:

  • Look in Online Store → Themes → Customize → Header to see if Feather offers a menu layout option such as Mega Menu, Dropdown, or Compact.
  • If there isn’t a setting, you’ll likely need to modify the theme’s CSS and possibly the menu’s Liquid markup so the submenu uses width: auto (or fit-content) and is positioned directly beneath the parent menu item instead of spanning the full page.
  • If you’re using a theme purchased from a third party developer. It’s also worth checking their documentation or contacting their support, as they may already have a setting or code snippet for this layout.

If you can share the URL to your store (or a preview link), I can help identify whether this can be changed with CSS alone or if it requires editing the theme’s menu code.

6