[Resolved] Sub-menu scroll on mobile

Home Forums Support [Resolved] Sub-menu scroll on mobile

Home Forums Support Sub-menu scroll on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #902670
    Greg

    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!

    #902680
    David
    Staff
    Customer Support

    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

    #902798
    Greg

    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!

    #902808
    David
    Staff
    Customer Support

    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;
    }
    #902847
    Greg

    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!

    #902863
    David
    Staff
    Customer Support

    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 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.