Archived topic

Making Sub Menu's Scrollable

3 replies · Started by Megan on March 26, 2022

Viewing posts 1–4 of 4

March 26, 2022 at 6:12 pm #2168438

Hi there, we have a long list of sub menu items, which go off the edge of the screen on many devices - visitors can't see the whole list of sub menu links because it's too long (12 items right now).

We would like to make this scrollable but can't find any functionality to make this happen. Do you have some type of code, or option for resolving this?

Appreciate any help!

Thanks :)

Website: https://tours.solofemaletravelers.club/

March 26, 2022 at 7:41 pm #2168458

Hi Megan,

I think your best bet is to use the off canvas menu which can be activated at customizer > layout > off canvas panel :)

March 27, 2022 at 4:44 pm #2169170

Hi Ying, thanks for the reply, so there is no way to turn on the ability to scroll for the sub menus then?

Thanks

March 27, 2022 at 8:17 pm #2169237

Hi Megan,

The usual and safe solution for this would be an off-canvas menu as mentioned by Ying, but, if you would like a scrollable sub-menu, we can use custom CSS to achieve this.

For instance, for menu item “Destinations”, we can add this custom CSS to make its sub menu items scrollable:

li#menu-item-965:hover > ul.sub-menu{
    height: 200px;
    overflow-y: scroll;
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

Hope this helps! :)

This archived topic is closed to new replies.

Start building better websites today.