Keep a menu item in a single line instead of two lines

Store Design
,

Topic summary

A Shopify store owner is experiencing an issue where a menu item breaks into two lines when the dropdown menu appears, and they want to keep it on a single line.

Proposed Solutions:

Multiple community members offered CSS-based fixes:

  • GemPages suggested editing theme.liquid file and adding custom code before the </body> tag
  • Dan-From-Ryviu recommended adding .list-menu--disclosure { width: max-content !important; } to the bottom of base.css
  • PageFly-Victor proposed modifying component-list-menu.css with a media query setting width to 23rem !important
  • infoatcodelab7 suggested targeting specific menu item classes in base.css with a width of 24rem !important

Current Status:

The original poster reported that the first solution didn’t work. Dan-From-Ryviu provided a screenshot showing their solution’s result, but no final resolution has been confirmed. The discussion remains open with multiple alternative approaches available to try.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
3

Hello @armandorangel ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1679535131657.png
GemPages_0-1679535131657.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1679535148663.png
GemPages_1-1679535148663.png1519×886 62.3 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like