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

Technical Q&A
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?