Blank Space in Mega Menu

Shopify Discussion

Topic summary

A user working with Shopify’s “Ride” theme sought help reducing excessive blank space in their mega menu. They provided comparison images showing their current menu layout versus a desired layout inspired by Zumiez’s website.

Solution Provided:

  • Add CSS to assets/component-mega-menu.css to create a 5-column layout with defined gaps
  • Modify base.css to add column breaks before specific menu items (tops, hoodies, bottoms, socks, accessories)
  • Adjust column count as needed when adding more menu items

Alternative Suggestion:
Restructuring the menu hierarchy (5 main items with sub-items) was mentioned as potentially cleaner than the current flat structure.

Outcome:
The CSS solution successfully resolved the spacing issue to the user’s satisfaction. The discussion is now resolved.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I am having trouble trying to figure out how to space my menu out so there’s not so much empty space. I’ll attach an example of how I want my menu to look from the Zumiez website. I’m currently using the “Ride” theme.

menu.jpg
menu.jpg1847×556 22.4 KB

menuexample.jpg
menuexample.jpg1817×558 73.6 KB

2

Hi @Sleevy

Welcome to the community. To be able to help better, could you share a link to your store?

Without that, it could be just guessing.

3
4

You can try with some CSS, it is not ideal but it might work.

In file assets/component-mega-menu.css add to the end:

.mega-menu .mega-menu__list--condensed {
    columns: 5;
    column-gap: 2rem;
}

and then in base.css find this rule and add last line

#HeaderMenu-catalog-tops, #HeaderMenu-catalog-hoodies-sweatshirts, #HeaderMenu-catalog-bottoms, #HeaderMenu-catalog-socks, #HeaderMenu-catalog-accessories {
    font-weight: 700;
    font-size: 25px !important;
    break-before: column;
}

And if you add more columns, then adjust the value from 5.

With these changes it should look like this:

scrnli_aYqHRtnDiBu65d.png
scrnli_aYqHRtnDiBu65d.png1532×1043 119 KB

It looks like you made all the menu items all in the same level, so maybe it would be slightly cleaner if you made 5 main items and then added sub-items to each one. It could be targeted in a different way but the current way can work.

5

This way you explained worked to my liking. Thank you very much for your help :slightly_smiling_face:

1 Like