How can I display sub-menu items in multiple columns?

Solved

How can I display sub-menu items in multiple columns?

bescene
Tourist
6 0 1

Hi there, my client has a fashion store which is slowly growing and we now have quite a few categories and collections. At the moment, under 'Shop' and 'Brands' everything is showing up in one column, is there anyway we can get things to show up in multiple columns? 

Accepted Solution (1)
LuffyOnePiece
Shopify Partner
650 93 120

This is an accepted solution.

Hi @bescene ,

 

Go to the Online store -> Themes-> Edit code

 

LuffyOnePiece_0-1711343528631.png

 

Search for the base.css file and add the code in the end of the file as in reference.

 

LuffyOnePiece_1-1711343667102.png

 

 

Thank you

 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Replies 8 (8)

LuffyOnePiece
Shopify Partner
650 93 120

Hi @bescene ,

 

Can you please send a preview URL for the store so that I can help you out?

Thanks

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
bescene
Tourist
6 0 1

Hi Sandeep,

Here's the URL:
https://elleryandmoss.com.au/

 

Ideally wanting the brands and shop submenu categories to go into multiple columns.

Thank you,

Sophie

LuffyOnePiece
Shopify Partner
650 93 120

Hi @bescene ,

Follow these Steps:

 

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just below tag <body>

<style>
@media only screen and (min-width: 995px) {
    ul.mega-menu__list.page-width.mega-menu__list--condensed {
        display: grid !important;
    }

    ul.mega-menu__list.page-width.mega-menu__list--condensed li {
        width: 100% !important;
    }
}

</style>

 

Result:

LuffyOnePiece_0-1711337843854.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

 

 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
bescene
Tourist
6 0 1

Hi there,

I'm struggling to find the tag <body>. I've tried to search for it, but it's not appearing.

Any suggestions? Thank you. 

LuffyOnePiece
Shopify Partner
650 93 120

Hi @bescene ,

 

Add the below code at the end of the base.css file.

@media only screen and (min-width: 995px) {
    ul.mega-menu__list.page-width.mega-menu__list--condensed {
        display: grid !important;
    }

    ul.mega-menu__list.page-width.mega-menu__list--condensed li {
        width: 100% !important;
    }
}

If you require further help to customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
bescene
Tourist
6 0 1

Sorry, I'm still struggling to find it. I'm not very competent with code. 

 

 

LuffyOnePiece
Shopify Partner
650 93 120

This is an accepted solution.

Hi @bescene ,

 

Go to the Online store -> Themes-> Edit code

 

LuffyOnePiece_0-1711343528631.png

 

Search for the base.css file and add the code in the end of the file as in reference.

 

LuffyOnePiece_1-1711343667102.png

 

 

Thank you

 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
bescene
Tourist
6 0 1

Thank you so much for all your help. Really appreciate it 🙂