Mega menu text wrap HELP!

Topic summary

Issue: On desktop in the Shopify “Horizon” theme, mega menu item text wraps to a second line. The requester wants each menu title forced to a single line.

Scope: Change should apply to desktop only, with mobile unaffected.

Evidence: A screenshot is provided and is central to visualizing the wrapping behavior.

Request: Practical guidance to prevent text wrapping for menu titles (e.g., via theme settings or CSS—Cascading Style Sheets), applied conditionally for desktop. “Mega menu” refers to a large, multi-column dropdown navigation.

Status: No solutions or workarounds have been provided yet. The thread remains open and unresolved.

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

Hi All, Ive noticed the menu text wraps on desktop. is there a way to remove the wrap so the menu title shows on one line only. Desktop only please. seem here, theme shopify Horizon.

Hey @DASCPA

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
span.mega-menu__link-title {
    white-space: nowrap !important;
}
</style>

RESULT:

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

Thank you, much appreciated!

1 Like

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.