Solved

How do i make categories stack in the dropdown menu

OIMA
New Member
8 0 0

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
9234 1146 1493

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
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI

View solution in original post

Replies 14 (14)

suyash1
Shopify Partner
9234 1146 1493

@OIMA - can you please share your website link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
OIMA
New Member
8 0 0

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

 

Password: Salasanaa20022!

suyash1
Shopify Partner
9234 1146 1493

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
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
OIMA
New Member
8 0 0

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
9234 1146 1493

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
OIMA
New Member
8 0 0

Thank you so much!

 

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

example4.png

suyash1
Shopify Partner
9234 1146 1493

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
OIMA
New Member
8 0 0

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
9234 1146 1493

@OIMA - difficult when you have more than 4

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
OIMA
New Member
8 0 0

But if I have exactly 4?

OIMA_0-1715881191866.png

 

suyash1
Shopify Partner
9234 1146 1493
it depends on the text length, and it changes all the time
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
OIMA
New Member
8 0 0

Oh, but still, thanks a lot!

suyash1
Shopify Partner
9234 1146 1493
welcome, sorry could not help further
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI

Brett_Helium
Shopify Partner
227 44 97

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
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (330+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (250+ reviews)