[Resolved] Unable to reach bottom of primary menu with sticky header enabled

Home Forums Support Unable to reach bottom of primary menu with sticky header enabled

This topic contains 19 replies, has 3 voices, and was last updated by  David 1 month ago.

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
  • #1014733


    To reproduce:

    1) Enable sticky header
    2) Create a primary nav with three levels of links that will push the bottom of the expanded menu below the bottom browser window.
    3) Try to access the bottom menu options (the page will scroll, but the menu items aren’t accessible with mouse)


    Leo Customer Support

    Hi there,

    Is the problem visible on the page you link? If not are you able to show it?

    Thanks 🙂



    Depending on the resolution of the monitor you’re viewing it on, it should present on the link I included. Expand Government > Departments > and try to get to the bottom of the menu.


    Leo Customer Support

    I see it now thanks. Looks like it’s because that sub menu is just extra long.

    What would the desire solution be?



    It’s also an issue on mobile. Maybe have the menu scroll when the menu’s expanded.

    On desktop, maybe have the sticky header not stick when a top level menu item is expanded. That would allow the users to scroll down the page/menu and back up.

    I’m probably going to go down the route of making the padding smaller on the desktop menu or look in to mega menus. But the mobile would be nice to resolve as it’s already pretty small text and padding for fingers to select


    David Customer Support

    Hi there,

    i am not seeing the issue on desktop or the Government > Departments sub menu.
    To make the mobile menu scrollable try this CSS:

    .mobile-header-sticky #mobile-header.toggled .main-nav>ul {
        max-height: calc(100vh - 60px);
        overflow-y: scroll;

    Or alternatively use the Off Canvas panel for mobile navigation.



    Thanks for the CSS for mobile David. That seems to have fixed it for phones. You may not have been able to reproduce the issue on desktop based on your resolution or I may have removed the submenu items before you had seen it. I’ve added a bunch of submenu items to the departments menu item if you’d like to take a look a the desktop experience.


    David Customer Support

    Sub-sub menus by default float to the side to minimize this sort of thing from happening.
    Is that not an option?

    Alternatives would be set a max-height to the menu and setting its overflow to scroll;
    Other than that it would take some Javascript to do ‘something’ in this event.



    Having the 3rd level menu expand to the side might work. That only seems to be enabled when navigation dropdown is set to “hover” though. The hover option isn’t accessible enough for our needs. Is there a way to get the navigation to expand like hover with “click menu item” selected?


    David Customer Support

    Hmm… tricky …. issue could still be present if the sub menu is really long and have to deal with which side of the parent it should float or it could end up off the side of the browser.

    How about making the Sub Menu scrollable if it is taller then X? Something like this:

    .dropdown-click .main-navigation .menu > li > ul.toggled-on {
        max-height: calc(100vh - 200px);
        overflow-y: scroll !important;

    Adjust the 200px to suit the height of the header and a little more to stop it from hitting the bottom of the viewport.



    Fixing the longer menus on mobile seemed to work pretty good. But the desktop experience probably needs a mega menu or off canvas treatment. Thanks for taking a look a this.


    David Customer Support

    I agree. Glad to be of help.



    Running into a similar issue while using the Max Mega Menu option. While it does mostly resolve the need to scroll vertically, some low-resolution desktops push the expanded primary nav below the bottom of the screen. This makes it inaccessible when the sticky header is turned on. Is there a way to keep the sticky header on and have it “unstick” when the primary nav is expanded? That would allow users to scroll down if it’s expanded to reach the bottom of the menu. To see an example of the issue, go to https://bhamprod.wpengine.com and expand the Services option in the primary nav on a monitor set to a lower res.


    Leo Customer Support

    Is this the site we should be looking at?

    It isn’t using GP?



    It’s using GP in combination with Max Mega Menu for the mega menu future. But I was wondering if there’s any way to have the sticky header “unstick” when the menu is expanded. That is the URL – I just had it switched temporarily for testing to another domain name. It should come up for you now.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.