How can I extend the width of my dropdown menu on the Refresh theme?

Topic summary

Goal: Make a long dropdown menu item in the Shopify Refresh theme display on a single line by increasing the submenu width/spacing.

Key steps suggested:

  • Edit theme code: Online Store → Theme → Edit code → base.css.
  • Target CSS selector: .header__submenu .header__menu-item.
  • Proposed CSS: justify-content: space-between; padding: 0.8rem 2rem; to widen spacing in the submenu.

Progress and issues:

  • Helpers requested the store URL and password; the requester shared them (credentials not repeated here).
  • The requester couldn’t locate the CSS class with search and asked for the exact line; reported the suggestion didn’t work.
  • Another user confirmed a partial fix using padding: 0.8rem 0.24rem; it forces one line but removes left whitespace. They also want the dropdown aligned more centrally under the parent “Shop” menu instead of right-aligned.

Open questions:

  • Precise location/selectors for modifying submenu width/alignment in Refresh if .header__submenu .header__menu-item isn’t found or overridden.
  • How to restore left padding while keeping one-line text and how to center the dropdown under the parent item.

Notes: Screenshots illustrate the overflow and spacing; the CSS snippet is central to the discussion. The thread remains unresolved.

Summarized with AI on January 4. AI used: gpt-5.

corucent.com Password (Zubair/Abdullah)