[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

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

    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)

    #1014737
    Leo
    Staff
    Customer Support

    Hi there,

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

    Thanks 🙂

    #1014751
    Steven

    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.

    #1014759
    Leo
    Staff
    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?

    #1014791
    Steven

    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

    #1014888
    David
    Staff
    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.

    #1016847
    Steven

    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.

    #1017122
    David
    Staff
    Customer Support

    hmm…
    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.

    #1017132
    Steven

    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?

    #1017452
    David
    Staff
    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.

    #1017764
    Steven

    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.

    #1017767
    David
    Staff
    Customer Support

    I agree. Glad to be of help.

    #1179938
    Steven

    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.

    #1180142
    Leo
    Staff
    Customer Support

    Is this the site we should be looking at?
    https://bhamprod.wpengine.com/

    It isn’t using GP?

    #1180149
    Steven

    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.