Archived topic
Secondary menu sticky scroll problem
3 replies · Started by Javier on May 3, 2022
I have set a secondary menu to stick (https://generatepress.com/forums/topic/how-to-stick-secondary-navigation/) and it works as expected but i have a problem in small screens and scroll.
This menu contains all the product categories of the store, so it's heigh, in small screens, if the device screen height is lower than the menu height, I can't scroll this menu so I only can see the visible options.
I have adjusted the line-height to make the menu visible on and iPhone 8 in portrait mode, but in landscape it doesn't solve the issue and same for small screens.
Hi there,
yeah thats a tricky issue to resolve, as sticky nav stops the element from scrolling, the most i can offer is this CSS:
@media (max-width: 768px) {
.secondary-navigation.toggled .main-nav {
max-height: calc(100vw - 118px);
overflow-y: auto;
}
}What it does is set the max height to 100% of the viewport height minus the height of the header and secondary nav, and then allows the user to scroll the menu. But i would test it thoroughly as it can create issues with the mobile UI getting in the way... and theres nothing we can do about that.
You may want to consider combining your menus into the Off Canvas Panel
Hi David.
I have adapted the code to adjust because I don't want the secondary menu to be too low, so it's still an issue with lower screens.
The Off Canvas Panel will be a solution but in this case I use it for regular menu.
Anyway, thanks for your help.
Glad to hear you have a solution !
