Re: Scrolling Drop Down Menus

Solved

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

mikehowes
New Member
5 0 0

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+ optionsDrop down with 65+ options

 

Drop down #2

Drop down with 8 optionsDrop down with 8 options

 

 

Accepted Solution (1)
GemPages
Shopify Partner
5624 1261 1230

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 11 (11)

GemPages
Shopify Partner
5624 1261 1230

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
mikehowes
New Member
5 0 0
GemPages
Shopify Partner
5624 1261 1230

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
mikehowes
New Member
5 0 0

That didn't seem to work for me.

GemPages
Shopify Partner
5624 1261 1230

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
mikehowes
New Member
5 0 0

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.

 

Screenshot 2022-12-09 at 9.48.42 PM.png

GemPages
Shopify Partner
5624 1261 1230

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
mikehowes
New Member
5 0 0

That did the trick. Thank you!

GemPages
Shopify Partner
5624 1261 1230

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Emmanuelle1
Excursionist
24 2 3

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
Shopify Partner
1 0 0

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.

A.C