[Resolved] Make Entire Menu Scrollable

[Daniel]

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!

[David]

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.

[Daniel]

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/

[David]

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.

[Daniel]

ok, I have created a stagging site (https://www.staging2.memescout.com/) and removed the CSS I added previously.

[David]

Try this:

@media (min-width: 769px) {
    .main-navigation:not(.slideout-navigation) .main-nav {
        max-height: calc( 100vh - 180px);
        overflow-y: auto;
    }
}

[Daniel]

Thanks! It Works…

[David]

You’re welcome

[Author]

Posts