[Support request] Make sub-menu scrollable

[Silko]

Hi guys,

I have a huge submenu for some countries on my site: https://www.geldueberweisen.com

If you want to look for a specific country in the category “Afrika” (for example) my visitors need a scroll wheel on the mouse so see the full content. My plan is to make the submenu vertical scrollable if the menu is higher than the screen-height (only for desktop)

Like here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_vertical_menu_scroll

How can I do that?

Best regards,

Silko

[David]

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

[Silko]

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

[David]

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.

[Silko]

Awesome, thanks!

[David]

You’re welcome

[Markus]

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

[David]

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

[Markus]

thank you, grate support!

[David]

Glad to be of help

[Author]

Posts