Archived topic
Simple Mega Menu - sticky > 4 columns with 20+ items > scrollable?
3 replies · Started by Christian on July 10, 2018
Dear Tom and Support Team,
having built a GeneratePress "Simple Mega Menu" on my site https://zenhub.org and using the menu's option "sticky navigation" I run into a visibility problem on smaller (notebook-)screens: Since there is a long list of items in two of the 4 Simple Mega Menu columns, the visitor cannot see the items below the screen's bottom - and is stuck as long as he/she points on the drop-down Mega Menu.
On disabling the Sticky Navigation, the problem is not apparent, however, I prefer the Sticky Navigation enabled.
Is there some CSS code I could add making the two long columns scrollable?
I tried something like; with some not functional scrollbars coming up:
nav .main-nav .mega-menu ul .sub-menu {
overflow-y: scroll;
}
::-webkit-scrollbar
{
width: 3px; /* for vertical scrollbars */
height: 3px; /* for horizontal scrollbars */}
::-webkit-scrollbar-track
{
background: rgba(0, 0, 0, 0.1);}
Maybe you have an idea how to "unstuck" the drop-down Simple Mega Menu when "Sticky Navigation" is enabled?
Thank you for your consideration,
Best, Chris
Hey Chris,
This is a known limitation to the sticky navigation on mobile unfortunately - at least for now.
The best workaround is to enable the slideout navigation on mobile. This will create a better experience for your users until we figure out a better solution.
Dear Tom,
thank you very much for your reply.
For mobile I am using Peter Featherstone's Responsive Menu which works together with GeneratePress out of the box.
The problem in my case is more on notebook screens. However, I'll wait patiently for a solution in the future and for the moment unstick the main menu... I very much like the Menu+ plugin and the Simple Mega Menu; I think the current options and the lightness are already awesome - and I look forward more to come.
Thank you for the wonderful theme and your wonderful support!
Best, Chris
Sounds good! Thank you! :)
