Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How do i make categories stack in the dropdown menu

Solved

How do i make categories stack in the dropdown menu

OIMA
Tourist
15 0 1

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.

example2.png

 

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

example3.png

 

Help would be greatly appreciated, thanks!

 

Accepted Solution (1)
suyash1
Shopify Partner
10143 1254 1595

This is an 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%;}
}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Replies 14 (14)

suyash1
Shopify Partner
10143 1254 1595

@OIMA - can you please share your website link?

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
OIMA
Tourist
15 0 1

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

 

Password: Salasanaa20022!

suyash1
Shopify Partner
10143 1254 1595

This is an 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%;}
}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
OIMA
Tourist
15 0 1

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?

OIMA_0-1715878759337.png

 

suyash1
Shopify Partner
10143 1254 1595

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
OIMA
Tourist
15 0 1

Thank you so much!

 

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

example4.png

suyash1
Shopify Partner
10143 1254 1595

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
OIMA
Tourist
15 0 1

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

suyash1
Shopify Partner
10143 1254 1595

@OIMA - difficult when you have more than 4

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
OIMA
Tourist
15 0 1

But if I have exactly 4?

OIMA_0-1715881191866.png

 

suyash1
Shopify Partner
10143 1254 1595
it depends on the text length, and it changes all the time
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
OIMA
Tourist
15 0 1

Oh, but still, thanks a lot!

suyash1
Shopify Partner
10143 1254 1595
welcome, sorry could not help further
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

Brett_Helium
Shopify Partner
284 53 128

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/

Brett | Helium
- Customer Fields ✪✪✪✪✪ (360+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (290+ reviews)
- Strike Automatic Discounts NEW!