How can I control the number of categories on each row in a Mega Menu?

Technical Q&A

Topic summary

Controlling how many categories appear per row in a Shopify mega menu (large drop-down navigation) to switch from a 7/3 split to 5/5.

Key solution (Shopify theme CSS):

  • In assets/component-menu-dropdown.css, remove the rule: .list-mega-menu { column-gap: 3rem; }.
  • Replace the .list-mega-menu block to keep flex-wrap and row-gap only (remove column-gap), ensuring items can wrap evenly.
  • In .mega-menu__item, add width: 20% to force five items per row (5 × 20% = 100%), keeping existing flex and max-width.

Outcome: The original poster confirmed the CSS changes worked and now shows five categories per row. A screenshot was provided for context, but the resolution relies on CSS edits.

New development: Another user with the Kalles theme (the4) reports a similar issue (limited to three items per row) but lacks component-menu-dropdown.css and instead has mega-menu.css. Their request for theme-specific guidance remains open and unresolved.

Summarized with AI on December 21. AI used: gpt-5.
1

Hi everyone,

Below is an example from my page. I’d like to be able to control the number of categories on each row.

For instance, below there are 7 categories with subs at the top and 3 below.

I’d like to change this to instead have 5 and 5 on each row.

Tupperton_0-1662374301623.png
Tupperton_0-1662374301623.png1242×697 22 KB

@LitExtension is this something you could help with too? :slightly_smiling_face:

2

Hi @Tupperton , please share url :slightly_smiling_face:

3

Hi @Tupperton ,

Please send your site and if your site is password protected, please send me the password. I will check it.

4

https://housedoctor-shop.myshopify.com/

Pass:soltest

Thank you both!

5

Hi @Tupperton , go to edit code > assets > component-menu-dropdown.css, find this:

.list-mega-menu {
    column-gap: 3rem;
}

And delete it.
Find this:

.list-mega-menu {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: 3rem;
    column-gap: 2rem;
}

And replace it with:

.list-mega-menu {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: 3rem;
}

Find this:

.mega-menu__item {
    flex: 1 1 auto;
    max-width: 22rem;
    page-break-inside: avoid;
    break-inside: avoid;
}

Replace it with:

.mega-menu__item {
    flex: 1 1 auto;
    max-width: 22rem;
    page-break-inside: avoid;
    break-inside: avoid;
    width: 20%;
}
2 Likes
6

Beautiful! That worked perfectly! :grin:

7

Hello,

I have the same issue on:

https://lovegrown.diamonds

I am using the Kalles them by the4

and I do not have component-menu-dropdown.css.

There is a mega-menu.css file though.

I have the same issue, IIt allows maximum 3 items (collections) per row and I want them to all be in the same row. Could you please help me with that as well?