How do i make categories stack in the dropdown menu

[OIMA]

This is my current dropdown menu, however i have so many categories that it doesn't look good and you can't see all of them.

Can i somehow make them stack like a megamenu on the right like this:

Help would be greatly appreciated, thanks!

[suyash1]

@OIMA - can you please share your website link?

[OIMA]

https://f3aa00-b9.myshopify.com/

Password: Salasanaa20022!

[suyash1 · Accepted solution]

@OIMA - please add this css to the very end of your base.css file and check

@media screen and (min-width:750px){
details[open] .header__submenu.list-menu:not(.list-menu--disclosure){width: 60rem;  display: flex;    flex-wrap: wrap;}

.header__submenu li{flex-basis: 33%;}
}

[OIMA]

Thanks, it looks great! But, currently there's only 3 products on a row, do i change the width if I want to have more products on one row?

[suyash1]

@OIMA - yes, change that 33% to the number you want, 25 for 4, 16 for 6 etc

[OIMA]

Thank you so much!

This is bit of nitpicking, but can I even out the categories somehow?

 

[suyash1]

@OIMA - it depends on the text length, hence usually 3 or 4 options are preferred 

[OIMA]

I just have so many categories that only 4 options or more would work. Is there any way I could even those out?

[suyash1]

@OIMA - difficult when you have more than 4

[OIMA]

But if I have exactly 4?

[suyash1]

it depends on the text length, and it changes all the time

[OIMA]

Oh, but still, thanks a lot!

[suyash1]

welcome, sorry could not help further

[Brett_Helium]

Hey @OIMA, sounds like you already implemented a CSS solution which mostly works for you, but I'll just add a quick note here in case you want to try another option or anyone else with a similar problem wants to try this.

You could also accomplish something like this by using an app such as our Meteor Mega Menu app. Your current design would be most similar to our Amazon menu template (which also optionally includes an image in the menu), but you could also consider our other designs for a different look. Here's a link to our demo sites where you can preview our templates: https://meteor-outdoor.myshopify.com/