- This topic has 19 replies, 3 voices, and was last updated 4 years ago by David.
-
AuthorPosts
-
September 20, 2019 at 11:18 am #1014733Steven
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)September 20, 2019 at 11:25 am #1014737LeoStaffCustomer SupportHi there,
Is the problem visible on the page you link? If not are you able to show it?
Thanks 🙂
September 20, 2019 at 11:50 am #1014751StevenDepending 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.
September 20, 2019 at 12:12 pm #1014759LeoStaffCustomer SupportI see it now thanks. Looks like it’s because that sub menu is just extra long.
What would the desire solution be?
September 20, 2019 at 1:09 pm #1014791StevenIt’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
September 20, 2019 at 5:04 pm #1014888DavidStaffCustomer SupportHi 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.
September 23, 2019 at 9:15 am #1016847StevenThanks 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.
September 23, 2019 at 3:19 pm #1017122DavidStaffCustomer Supporthmm…
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.September 23, 2019 at 3:40 pm #1017132StevenHaving 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?
September 24, 2019 at 4:22 am #1017452DavidStaffCustomer SupportHmm… 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.
September 24, 2019 at 8:38 am #1017764StevenFixing 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.
September 24, 2019 at 8:40 am #1017767DavidStaffCustomer SupportI agree. Glad to be of help.
February 28, 2020 at 10:58 am #1179938StevenRunning 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.
February 28, 2020 at 4:29 pm #1180142LeoStaffCustomer SupportIs this the site we should be looking at?
https://bhamprod.wpengine.com/It isn’t using GP?
February 28, 2020 at 4:38 pm #1180149StevenIt’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.
-
AuthorPosts
- You must be logged in to reply to this topic.