Make Primary Menu Scroll-able

Hi there,

Would this help?
https://generatepress.com/forums/topic/make-sub-menu-scrollable/

Let me know :)

I have tried that but it doesn't work. https://prnt.sc/uj44wy

Any other ideas?

Can you try this instead:

.dropdown-click .main-navigation:not(.toggled) ul li:hover>ul {
    max-height: 500px; /* Adjust this height to suit */
    overflow-y: scroll;
}

It kind of works, but it only shows the menu scrollable once you hoover over it. If you don't hoover over it display's all items in the menu. You Can test it here: https://www.staging2.memescout.com/

It also doesn't work on mobile, I have checked on my phone.

Your staging site doesn't quite work for me.

This is what I'm seeing:
https://www.screencast.com/t/LQbx6OpmFEE

Looks like it might be some caching error.

Try this one: https://www.staging16.memescout.com/

Hi there,

try this CSS:

/* Fix height and set scroll on parent item */
.dropdown-click .main-navigation:not(.toggled) ul>li.menu-item-has-children {
    max-height: 300px;
    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;
}

It worked for Desktop & Tablet but when I test it on my cell phone it doesn't display all menu items. I have also tested it on https://ready.mobi/ and it didn't display all menu items.

I have updated the css code you gave me on my live website: https://www.memescout.com/

Let's make the code desktop only like this:

@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: 300px;
        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;
    }
}

As for mobile, with that many menu items, I think the best solution would be to use the off canvas panel:
https://docs.generatepress.com/article/off-canvas-panel-overview/

It works fine in the WordPress Customizer, https://prnt.sc/ujn66u, anyway we can make it scrollable on mobile?

I am not sure thats possible - i can take a look but your staging site URL is not working.

I have applied the css on my live site, http://www.memescout.com

Try this:

/* Fix height and set scroll on parent item */
.main-navigation ul>li.menu-item-has-children {
    max-height: 350px;
    overflow-y: auto;
}
/* Stick parent item on scroll */
.main-navigation ul>li.menu-item-has-children>a {
    position: sticky !important;
    top: 0;
    position: -webkit-sticky !important;
    z-index: 1;
}
/* Force height of submenu */
.main-navigation ul>li.menu-item-has-children>ul {
    max-height: 100%;
    position: relative;
    z-index: 0;
}

I am not sure how it will behave on a real touchscreen device.

Hello

Yeah, that kind of works but not on all mobile devices.

So I was thinking to use a different approach, instead of making only sub menu scroll able I was thinking to make the entire menu scroll able once the height of the menu reaches over 500 px.

Like this website, https://9gag.com/ has the entire menu scroll able. Is it possible to do something like that?