How to hide the sub menu on toggle hover and show on click

Hi there,

Can I just not show on hover of the dropdown?

This can be done with custom CSS.

Try adding this:

.main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul {
    display: none;
}

Here's how to add CSS.
https://docs.generatepress.com/article/adding-css/

Hi Elvin,

Thanks that does work. But it also hides the submenu column on hover... Is there a way around this.

Thanks that does work. But it also hides the submenu column on hover… Is there a way around this.

to clarify, you want to show ALL on hover instead of completely removing the hover effect and let the submenu appear only when toggled?

If yes, try adding this CSS instead:

.main-navigation:not(.toggled) ul li.sfHover ul, .main-navigation:not(.toggled) ul li:hover ul {
    visibility: visible;
}

Perfect, that works. Thanks.

No problem. Let us know if you need further help. :D