Scroll bar

[BAFMotorsport]

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 

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

[BSS-TekLabs]

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.

[BAFMotorsport]

BAF Motorsport

[BSS-TekLabs · Accepted solution]

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

- 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:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSSCommerce-B2B]

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 😍

[Edgywebsites]

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!