Make sub-menu scrollable

Hi there,

you can try some CSS like this:

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

This will apply to any of the sub - sub menus by limiting the height which you can adjust to suit.
If you want to apply it solely to the afrika sub menu then you need to add a class to that parent menu:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

e.g class name of: scroll-menu

Then your CSS would look like this:

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

Hi David,

it works, thanks a lot! :-)

Is it possible to hide the scroll bar if it is not needed?

Example: Menu -> Anbieter -> Transferdienste: It has only 9 pages but the scroll bar is visible (but not needed).

Best regards,

Silko

Try changing:

overflow-y: scroll;

to:

overflow-y: auto;

If still an issue maybe increase the max-height by enough pixels so it doesn't detect overflow on that menu.

Awesome, thanks!

You're welcome

Hi,

it does not work for me.

I Would like to have a scrollbar in "Digitales Handwerk" in the main menu

Homepage is: https://www.handwerk-digitalisieren.de/ could you please support me?

Thank you

Hi there,

try this CSS:

@media(min-width: 769px) {
    .main-navigation:not(.toggled) ul li:hover>ul {
        max-height: 300px; /* Adjust this height to suit */
        overflow-y: auto;
    }
}

thank you, grate support!

Glad to be of help