Archived topic
Sticky Mobile Menu Scrolling Problem
3 replies · Started by Patrick on May 28, 2021
My clients site has a 3 deep top navigation menu, with lots of links. The issue we are having is the design has a sticky mobile menu, the navigation menu does not scroll. The scrollbar shows but when trying to scroll some of her menu is cut off.
If you go to the site and minimize for mobile, you will see if you click: Menu/ Experiences / The 7-day retreat. Once you go here the bottom of the menu is obviously cut off due to room, but at least in Firefox the menu will not scroll. Bug?
I have a couple of screenshots but it doesn't look like your forum allows us to add attachments.
Hi there,
for those types of long navigation the best solution is to use the Off Canvas Panel:
https://docs.generatepress.com/article/off-canvas-panel-overview/
Or with the current mobile menu - try this CSS:
#mobile-header.toggled .main-nav>ul {
max-height: calc(100vh - 80px); /* adjust 80px for height of header */
overflow-y: scroll;
padding-bottom: 60px; /* Optional padding to negate browser UI */
}Thank you David. I did not like the look of the Off Canvas Panel and the links were all gone without restyling. But the CSS worked great! Thank you for providing options including the CSS coding!
Glad to be of help!
