How to show all columns on a mega menu in one row

Store Design
, ,

Topic summary

A user needed help displaying 8 columns in their mega menu on a single row instead of wrapping to multiple lines.

Solution Provided:

  • Add custom CSS code to the theme.liquid file (above the </body> tag)
  • The code adjusts the mega menu layout to prevent column wrapping

Additional Request:

  • User also asked about adjusting the gap between columns 2 and 3 (Decorative stickers and Collectors shelves) for consistency

Outcome:

  • The CSS solution successfully resolved the wrapping issue
  • User confirmed it worked perfectly

Technical Details:

  • Store: oakenoon.com
  • Theme: Craft
  • Implementation required editing theme files directly
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi, I would like to show all of my columns on the mega menu in one row, however because I have 8 sections, they are wrapping to the next line. Can this all be displayed on one row?

See below image - I want the bottom two columns in red to be in the same row.

Ravenwooduk_0-1725703270676.png
Ravenwooduk_0-1725703270676.png1312×585 34 KB

Also if available, between column 2 and 3, (Decorative stickers and collectors shelves) there seems to be no gap. Can I change this gap so it is consistent throughout the mega menu?

theme: Craft

Store: oakenmoon.com

pass: Sheost

Thanks all!

2

Hey @Ravenwooduk

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 tag

RESULT:

Moeed_0-1725704023353.png
Moeed_0-1725704023353.png1892×875 264 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Thank you very much for the swift response! Perfect!

4

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.