Archived topic
Make Entire Menu Scrollable
7 replies · Started by Daniel on October 24, 2020
Hello
Can I make the entire menu scrollable instead of only the subitems? https://prnt.sc/v62zyn
Like for example 9gag.com or facebook.com (desktop version)
Here is my CSS for the submenu.
@media (min-width: 769px) {
/* Fix height and set scroll on parent item */
.dropdown-click .main-navigation:not(.toggled) ul>li.menu-item-has-children {
max-height: 350px;
overflow-y: auto;
}
/* Stick parent item on scroll */
.dropdown-click .main-navigation:not(.toggled) ul>li.menu-item-has-children>a {
position: sticky;
top: 0;
position: -webkit-sticky;
z-index: 1;
}
/* Force height of submenu */
.dropdown-click .main-navigation:not(.toggled) ul>li.menu-item-has-children>ul {
max-height: 100%;
position: relative;
z-index: 0;
}
}Thanks!
Hi there,
so do you no longer want the sub menus to be scrollable ? As you can't really have a scrollable sub menu inside a scrollable menu.
I think it would be better if the menu was entirely scrollable, not the sub-menu. Like Something they have done here: https://mdbootstrap.com/
You would first need to remove the CSS you added previously to make the sub menus scrollable.
Once thats done we can take a look if its possible to make your whole menu scrollable.
ok, I have created a stagging site (https://www.staging2.memescout.com/) and removed the CSS I added previously.
Try this:
@media (min-width: 769px) {
.main-navigation:not(.slideout-navigation) .main-nav {
max-height: calc( 100vh - 180px);
overflow-y: auto;
}
}Thanks! It Works...
You're welcome
