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.csssettingmax-height: 550pxandoverflow: scrollon.navmenu-submenu, while hiding the scrollbar visually with webkit and Firefox properties. -
Solution 2 (BSS-TekLabs): Similar approach using
max-height: 500pxandoverflow-y: scrollon.navmenu-submenuinbase.cssortheme.css. -
Solution 3 (Edgywebsites): Modify existing
.site-navigation .navmenu-submenurule by addingmax-height: 80vhandoverflow: 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.