How Can I Extend The Width Of My Dropdown Menu On The Refresh Theme?

Store Design

Topic summary

Goal: make a long dropdown menu item display on one line in the Shopify Refresh theme.

What was tried:

  • Initial advice: add CSS to increase submenu min-width. OP placed it in header.liquid but first put it outside a tag; then tried inside as advised, still no effect (likely selector/theme mismatch).
  • Placement guidance: add CSS inside an existing in header.liquid or, better, in a CSS asset (e.g., base.css or a menu-related stylesheet).

Most effective approach shared:

  • Instead of a fixed width, prevent line breaks and let the menu size automatically by targeting the specific menu list IDs. Use browser DevTools to inspect and copy the exact IDs from your store’s markup. Key CSS ideas: white-space: nowrap (keeps text on one line) and width: auto.

Notes/terms:

  • CSS = style rules; min-width sets a minimum dropdown width; white-space: nowrap prevents wrapping.
  • ID selectors differ by theme/menu structure; DevTools inspection is required.

Outcome/status:

  • Confirmed working on Dawn when added to base.css. OP (on Refresh) has not confirmed, so resolution is pending. Images provided were illustrative but not essential to the fix.
Summarized with AI on December 25. AI used: gpt-5.
6

@Corucent It doesn’t go at the bottom of the header.liquid.

Option 1) Start at the top of the page in header.liquid, and scroll slowly down until you see the tag opener, paste the initial code provided directly under that tag. Save, then check for changes.

Screenshot_2.png
Screenshot_2.png554×634 17.6 KB

Option 2) Start at the top of the page in header.liquid, and scroll slowly down until you see the <%style%> tag opener, paste the initial code provided directly under that tag. Save, then check for changes.

Screenshot_1.png
Screenshot_1.png669×554 22.5 KB