All things Shopify and commerce
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 🙂
Solved! Go to the solution
This is an 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.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
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.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an 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.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
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?
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 😍
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
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!
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?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025