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.
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
Your Feather theme is built on Dawn,
Dawn’s mega menu:
After applying the CSS Fix:
Steps:
1. Open your theme code
- Online Store > Themes.
- On your theme click the
...button, then Edit code.
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;
}
3. Done
- Reload your store and open the menu. The dropdown is now compact and sits under the item.
To adjust
min-width: 16remsets the smallest width. Raise it for a wider panel, lower it for a tighter one. The panel still grows to fit your longest item.