Archived topic
Sub-menu scroll on mobile
5 replies · Started by Greg on May 17, 2019
One of my menu items has a pretty long sub-menu. On mobile, it becomes an issue. When a user clicks for the sub-menu, it won't display all of the items. If I try to scroll down to see the remaining items, it won't allow me. Also, when the sub-menu is open on mobile, it won't allow me to scroll down to my other menu items. I have looked into this and have seen that Tom recommends using the slide out or off canvas menu. I tried this and it just doesn't work out for me. Is there any way to fix this issue? Thanks for your help!
Hi there,
it would mean losing the sticky mobile header and relatively positioning the menu so it forces the page content below the nav. If you want to pursue that then can you disable the sticky nav and ill test out the CSS
So there is no way to have a sticky menu and a menu/sub-menu that can scroll on mobile? I use to have a plugin called ShiftNav that was able to accomplish this. Thanks for the help!
Its a bit hackish but give this CSS a go:
.mobile-header-sticky #mobile-header.toggled .main-nav>ul {
max-height: calc(100vh - 60px);
overflow-y: scroll;
}Beautiful! Have you all thought about incorporating this into the theme? I think it's a feature that many people will enjoy as I've seen this issue brought up before. Thanks for the great support as always!
Awesome - glad it worked.
Its a tricky one as that CSS is specific to the height of your Mobile Header. And theres no way of GP knowing that without using Javascript which could lead to unsightly jumping on the screen. So unless we find a better solution it will probably remain as a CSS fix.
Thanks for testing it :)
