Make Primary Menu Scroll-able

[Daniel]

Hello

I have a lot of items on the menu, is it possible to make it scrollable? Like 9gag.com has? For example, I want to show like 5 items, and then if the menu has more than 5 items I want to make it scrollable.

Thanks!

[Leo]

Hi there,

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

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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

Any other ideas?

[Leo]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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.

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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/

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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?

[Author]

Posts