Design menu neatly

Store Design

Topic summary

Main issue: Reformat the submenu (categories) layout from a 4-4-2 grid to a 5-5 grid and improve visual balance by centering.

Key steps and solutions:

  • Access: Helpers requested a preview link; access was impacted by market restrictions. Switching the storefront currency to USD allowed viewing.
  • 5-5 layout via CSS (Cascading Style Sheets):
    • Edit header.css (around line 279) to change grid-template-columns from 4 to 5, affecting the megamenu columns.
    • Alternative: In base.css, add: ul.nav-megamenu-columns { grid-template-columns: repeat(var(–megamenu-column, 5), minmax(0, 1fr)) !important; } to enforce five columns.
  • Another contributor suggested adding code above in theme.liquid (details not shown); screenshots indicated this also achieved the 5-5 result.

Centering adjustment:

  • To visually balance left/right gaps, add to base.css: .nav-submenu.nav-megamenu-container li a { text-align: center !important; }

Outcome:

  • User confirmed the 5-5 column layout works (via both approaches) and that centering made the menu look neat.
  • Screenshots were used to verify results.
  • Status: Resolved; no remaining questions.
Summarized with AI on December 25. AI used: gpt-5.
7

Hey @Sheeks

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-1719749597610.png
Moeed_0-1719749597610.png1907×373 124 KB

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

Best Regards,
Moeed

1 Like