[Support request] Burger Menu is cut off at the bottom

[Marc]

I have a very extensive website with a very large navigation. On the PC, everything works without a problem. On smaller displays, where the burger menu is shown, there is a problem; if a (sub)menu is longer than the display height, the lower part of the menu is cut off. You can still scroll down, but then only the page behind (overlaid by the menu) is scrolled and not the menu. How can I make it so that a longer menu is also displayed in full when I scroll down? Many thanks for a tip!

[David]

Hi there,

the issue arises because of the sticky navigation, once the navigation is stuck you cannot scroll the menu.
Options:

1. Do not use sticky navigation on mobile.

2. Add some CSS to make the menu scrollable:

.main-navigation.is_stuck .main-nav>ul {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

3. Use the Off Canvas Panel on mobile instead as this is its own fixed element. And doesn’t have the issue.

Of all the options if sticky navigation is a must have then i would go for #3.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marc]

Hello David, many thanks for the quick and detailed answer! After a few more attempts, I have now switched back to the OffCanvas navigation and styled it a bit more. Now I like it and I hope our customers do too 🙂

Thanks again and have a nice weekend, Marc

[David]

Glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts