# Sub Menu Drop dropdown width

**URL:** <https://community.shopify.com/t/sub-menu-drop-dropdown-width/660694>\
**Category:** Technical Q&A\
**Tags:** css\
**Created:** [August 4, 2026, 7:55pm UTC](https://community.shopify.com/t/sub-menu-drop-dropdown-width/660694 "2026-08-04T19:55:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sierra\_Covell1](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/sierra_covell1/32/410221_2.png) [@Sierra\_Covell1](https://community.shopify.com/u/Sierra_Covell1)\
**Post date:** [August 4, 2026, 7:55pm UTC](https://community.shopify.com/t/sub-menu-drop-dropdown-width/660694/1 "2026-08-04T19:55:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Moeed](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/moeed/32/407464_2.png) [@Moeed](https://community.shopify.com/u/Moeed)\
**Post date:** [August 4, 2026, 7:58pm UTC](https://community.shopify.com/t/sub-menu-drop-dropdown-width/660694/2 "2026-08-04T19:58:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ploqo](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/ploqo/32/398219_2.png) [@Ploqo](https://community.shopify.com/u/Ploqo)\
**Post date:** [August 5, 2026, 3:01am UTC](https://community.shopify.com/t/sub-menu-drop-dropdown-width/660694/3 "2026-08-05T03:01:59Z")

</div>

[Your Feather theme is built on Dawn](https://community.shopify.com/t/setting-a-default-size-for-each-color-in-feather-theme-i-believe-its-a-dawn-varient/412229),

Dawn’s mega menu:

 ![Before - the dropdown opens at full page width](https://canada1.discourse-cdn.com/shopifyforum/original/4X/9/d/f/9df0bb2bb254af10f2898b2530263d945fda8dfe.jpeg)

After applying the CSS Fix:

 ![After - compact dropdown, directly under the menu item](https://canada1.discourse-cdn.com/shopifyforum/original/4X/2/a/7/2a727d5a173ae095afaf2923b4420e57fe6f6347.jpeg)

Steps:

**1. Open your theme code**

- Online Store \> Themes.
- On your theme click the `...` button, then Edit code.

 ![Online Store > Themes > ... > Edit code](https://canada1.discourse-cdn.com/shopifyforum/original/4X/5/9/0/59061cbe3956efaa6cbe51b0c19dc6a9a65865d8.png)

**2. Paste the code**

- Under Assets, open `base.css`.
- Scroll to the very bottom, paste the code below, then Save.

```css
/* 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](https://canada1.discourse-cdn.com/shopifyforum/original/4X/4/b/8/4b85cb9c9805dffa7a68c4d1f4f7464101d37a6d.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Sierra\_Covell1](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/sierra_covell1/32/410221_2.png) [@Sierra\_Covell1](https://community.shopify.com/u/Sierra_Covell1)\
**Post date:** [August 5, 2026, 7:28pm UTC](https://community.shopify.com/t/sub-menu-drop-dropdown-width/660694/6 "2026-08-05T19:28:31Z")

</div>

> **[Performance Unlimited Clydesdales](https://performanceunlimitedclydesdales.myshopify.com/)**
>
> Performance Unlimited Clydesdales