Need the dropdown menu to scroll

Mette_Jacobi
New Member
1 0 0

Hi there,

I have seen this issue before in here, but the discussion was outdated, so I try here.

Does anyone know an easy way of making a dropdown that scrolls.  
I have a lot of categories on my site and the standard dropdown goes straight down out of sight to the bottom of the page. This means, that the site scroll but the dropdown does not...
If this can't be done by a beginner (like me), do you know a designer who can do this quickly for me?

Thank you,

Mette // www.minijacobi.dk

Replies 18 (18)
AnaW
Shopify Staff (Retired)
87 0 25

Hey, Mette!

Ana here, from the Shopify support team. :)

Unfortunately I don't know of a way to do this, but I noticed that you posted your thread in the Announcements category. I've moved it over to Shopify Design, so that you can get more help on it.

Ana

tim
Shopify Expert
2925 143 1041

HI MJ,

having menu drop downs so long is a very bad practice. Seeing that your theme does not allow you to add more top menu items, i'd consider moving to a newer theme, with megamenu or group tag filtering.

Having said that,  you can add this code to the bottom of the timber.scss.liquid Asset:

 

/* keep drop-down menu items closer to each other */
.site-nav--dropdown a {
    padding: 2px 15px;
}
/* Limit the height of the dropdowns and make them scrollable  */
ul.site-nav--dropdown {
    max-height: 80vh;
    overflow-y: auto;
}
/* MORE menu is tricky though -- no scrolling there */
#moreMenu ul.site-nav--dropdown {
    overflow-y: hidden;
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
HaiHai
Tourist
16 0 1

Hi Tim, 

 

I have the same problem with my shop. My problem ist I can´t find the timber.scss.liquid file in the code section. Could you tell me which file I have to pick and copy and paste the code you have shared?

 

thanks for your help!

 

kind regards Vincent

Denis_A
Shopify Partner
273 39 48

Hi @HaiHai 
What's your store url?

Get help with your Shopify store that you are looking for.
Shoot me an email: denis@thewebave.com
https://thewebave.com/
HaiHai
Tourist
16 0 1

https://zebraclub.store/

 

you will see the problem under "Brands" -> "MEN"

 

I have listed 35 Subcategories but the website does not show all and I cannot scroll down within the dropdown menu to see the other Brands ( which are listed as numbers just to show the problem.)

 

if you need a password: timmo

Denis_A
Shopify Partner
273 39 48

@HaiHai 

Put this piece of code in the bottom of your theme.scss file (Online Store->Actions->Edit Code->Assets->theme.scss.liquid)

.site-nav__item--no-columns .meganav__list {
    max-height: 70vh;
    overflow-y: auto;
}

 

 

Get help with your Shopify store that you are looking for.
Shoot me an email: denis@thewebave.com
https://thewebave.com/
HaiHai
Tourist
16 0 1

@Denis_A 

 

Thank you very much! You made my day <3

 

kind regards Vincent :)

MeghanBCLRca
Tourist
7 0 1

Hi @Denis_A ! I am having the exact same problem. I am using the theme Impluse. Can someone please help me put a scroll on my "Shop By Brand" list in the menu: https://bclocalroot.ca/

Thank you!

Denis_A
Shopify Partner
273 39 48

Hi @MeghanBCLRca 

Put this code at the bottom of your theme.scss file

.site-nav__dropdown {
    max-height: 55vh;
    overflow-y: auto;
}
Get help with your Shopify store that you are looking for.
Shoot me an email: denis@thewebave.com
https://thewebave.com/