[Resolved] Mobile menu won't scroll when too long for viewable area

Home Forums Support [Resolved] Mobile menu won't scroll when too long for viewable area

Home Forums Support Mobile menu won't scroll when too long for viewable area

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #846236

    Hi Tom,

    Just a quick message — although I resolved it, I thought it still worth mentioning.

    When I have the mobile menu enabled, and there are too many items that can fit within the viewable screen area (both on a smartphone and also on desktop when the breakpoint is narrow enough to use the mobile menu) — there is no way to scroll past the visible menu items to the ones “below” the screen area.

    I know in the past I could partially see the page scrolling behind the menu overlay (as there is a little transparency in the default settings) — and then the mobile menu would scroll a bit further to reveal the remaining items. It took a long time (much longer than regular page scrolling) to get there, but it did used to work.

    But now, I’m not sure for how long, it doesn’t work in any way.

    I did find these two support threads relating to the issue that helped me solve the problem (by enabling the slideout menu):


    Just for anyone else reading, the Customizer is where you enable the slideout menu, in Layout > Slideout Navigation, PLUS also in Menus > View All Locations (to set which menu is used under the Slideout Menu dropdown).

    I’m not sure if there is another solution? Mind you, I’m happy with the slideout menu — but would be good to know the other standard menu would work by default without having to force it to be slideout.

    The only thing I can think of that would help solve it, is that when you tapped on the mobile menu header, the opening of the menu pushed the regular page content below it (rather than appearing overlaid on top of the page content, if you know what I mean). Given visitors are in the menu, forcing the page content down the page to accommodate the open menu I think would be fine from a usability perspective (and to jump up again when the menu closes).

    EDIT: In the customizer, it may be useful then to have the choice of the mobile menu overlaying the page content or pushing it down the page when the mobile menu is open. That to me seems the most elegant solution (so for those who want a short menu to keep behaving as it does now, there is no change in that behaviour unless it is deliberately changed).

    But the slideout menu did solve my problem — on two sites with very extensive navigation menus (the site mentioned here, and its “sister site” which is reachable from this site’s homepage – both have very similar structures). I can now easily navigate mobile menus that are longer than the viewport / viewable area.

    Best wishes, Dean

    GeneratePress 2.2.2
    GP Premium 1.7.8
    Lead Developer
    Lead Developer

    Hey Dean,

    Thanks for the feedback!

    This is an issue when the sticky navigation is activated. If it’s not turned on, the mobile menu will push the rest of the content down.

    If it is activated, and your mobile menu is extensive, the slideout navigation is definitely the best method forward.

    Another solution would likely be to use some sort of javascript library to enable scrolling within the mobile menu, however, that would add to the size of the page.


    Ok, thanks Tom! Yes, sticky navigation is activated for mobile only – I hadn’t connected that to the issue! I can see now how that would be hard to do (and not really make sense, usability wise).

    But yes, the slideout seems much better than having another library / extra page weight. I like the way it works.

    Many thanks as always for your fast and helpful reply!

    Lead Developer
    Lead Developer

    Yea, the slideout is definitely way better from a UX perspective when it comes to mobile navigating.

    No problem! πŸ™‚


    I think the feature should work regardless of the number of items, using whatever layout options we want. This is literally the first thing I did as a new user setting up my site (after fonts and colors). πŸ™

    Proposed solution: Set #mobile-menu { max-height : calc(100vh - [height of logo]); overflow: auto; Also have to set .mobile-header-sticky #mobile-header.toggled .main-nav>ul { position: relative; }

    Lead Developer
    Lead Developer

    Cool solution! Thanks for this. We’ll play with it πŸ™‚

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