Scroll bar

Shopify Discussion

Topic summary

A Shopify store owner needs to add a scrollbar to their dropdown navigation menu because it extends beyond the laptop screen, making some options invisible. When users try to scroll, the dropdown closes instead of scrolling through the menu items.

Three solutions were provided:

  • Solution 1 (BSSCommerce-B2B): Add CSS to theme.css setting max-height: 550px and overflow: scroll on .navmenu-submenu, while hiding the scrollbar visually with webkit and Firefox properties.

  • Solution 2 (BSS-TekLabs): Similar approach using max-height: 500px and overflow-y: scroll on .navmenu-submenu in base.css or theme.css.

  • Solution 3 (Edgywebsites): Modify existing .site-navigation .navmenu-submenu rule by adding max-height: 80vh and overflow: auto. Notes that Mac users won’t see scrollbars by default and recommends adding a faded effect to indicate more items exist.

Current status: Another user (Stillwater) with the Trade theme reports the solutions aren’t working for their site and is seeking additional help. The issue remains unresolved for this second user.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi all

How would I add a scroll bar to my drop down menu on my page as on a laptop it does not fit so you cannot see all the options and when you scroll down it just gets rid of the drop down opposed to scrolling down on the drop down? please help, please see below image for reference

BAFMotorsport_0-1723555350347.png
BAFMotorsport_0-1723555350347.png318×885 25.5 KB

I want to add a scroll bar on the drop down menu :slightly_smiling_face:

1 Like
2

Hello @BAFMotorsport
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

3

BAF Motorsport

1 Like
4

Hi @BAFMotorsport ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.css

Step 3. Add this code at the end of file

.navmenu-submenu {
    overflow: scroll !important;
    max-height: 550px;
}
.navmenu-submenu::-webkit-scrollbar {
	display: none !important; /* Chrome, Safari and Opera */
}
.navmenu-submenu {
	-ms-overflow-style: none !important; /* IE and Edge */
	scrollbar-width: none !important; /* Firefox */
}

You can scroll it down

If it helps you, please like and mark it as the solution.

Best Regards :heart_eyes:

5
  • Here is the solution for you @BAFMotorsport
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.navmenu-submenu {
    max-height: 500px !important;
    overflow-y: scroll !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1723556707621.png
BSSTekLabs_0-1723556707621.png1898×912 281 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
6

Easiest way to fix this would be add the following style rules to your CSS file.

Go to online store > themes > actions > edit code >theme.css
add this code at the end of the file. Go to line 18691 or find the following rule:

.site-navigation .navmenu-submenu

Add 2 lines at the end so that it looks like the following:

.site-navigation .navmenu-submenu {
    position: absolute;
    top: 100%;
    z-index: 702;
    display: none;
    background-color: #2b3156;
    max-height: 80vh;
    overflow: auto;
}

This will ensure your dropdown menu won’t cutoff on any screen. However, please note that on macs, the scrollbar won’t show by default and until your customers don’t scroll, they won’t know that there are more menu item. So fix this, we recommend you add another style rule to add a faded effect at the bottom of the drop down menu so it indicates there are more menu item. If you need more assistance with this, please contact us.

Good luck!

7

Hi - I was having a similar issue in the Trade theme with our menu not scrolling. I’ve added the code to the file as outlined here, but I am still not seeing the scroll bar. https://stillwateraquaria.com/ Thoughts?

8

2 seconds ago

Hi - I was having a similar issue in the Trade theme with our menu not scrolling. I’ve added the code to the file as outlined here, but I am still not seeing the scroll bar. https://stillwateraquaria.com Thoughts?