How can I set up a scrolling drop down menu for many options?

[mikehowes]

I have two drop down menus on my store: one has 65+ options and one has 8 options. I would like the one with 65+ options to be set up with a scrolling menu, but the one with only 8 options would be fine as is. Any idea on how to resolve this?

Drop down #1:

Drop down with 65+ options

Drop down #2

Drop down with 8 options

[GemPages]

Hello @mikehowes

It's GemPages support team and glad to support you today.

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Kind & Best regards!
GemPages Support Team

[mikehowes]

Will a preview link work? https://o6am36f8hs76wawd-54938501213.shopifypreview.com

[GemPages]

Hello @mikehowes

It's GemPages support team and glad to support you today.

Please check out my suggestion below:

1. Go to Online Store -> Theme -> Edit code -> Layout

2. Open file theme.liquid then add this code to above the </head> tag

<style>
  nav.header__inline-menu .header__submenu{
    max-height: 100vh;
    overflow: scroll;
    height: 400px;
  }
  </style>

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

[mikehowes]

That didn't seem to work for me.

[GemPages]

Hello @mikehowes

It's GemPages support team and glad to support you today.

Sorry, please add that code to file theme.liquid

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

[mikehowes]

Thank you. That worked for the first drop down that had a lot of options, but now the second drop down has some excess blank space because there are fewer options. Is there any way to keep the second menu shorter? Screenshot below.

[GemPages · Accepted solution]

Hello @mikehowes

It's GemPages support team and glad to support you today.

Please change that code to 

<style>
  nav.header__inline-menu #HeaderMenu-MenuList-1.header__submenu{
    max-height: 400px;
    overflow-y: scroll;
  }
  </style>

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

[mikehowes]

That did the trick. Thank you!

[GemPages]

I am glad that my solution is helpful to you 😁.

[Emmanuelle1]

Hi!

Thank you very much, I was also looking for this but an d it makes the job one question: drop down menu can be scrolled by default on mobile, so how to make this code applying only for desktop? Your code is perfect on desktop but duplicates the scroll bar on mobile... 

Thanks by advance!

Emmanuelle

[alaattincagil]

I tried all the codes you said, but there is a menu with a long list in the menu bar in my store and the scroll does not appear.