Archived topic
Close open submenus when hovering a different parent menu item on desktop
11 replies · Started by Niklas on March 3, 2023
Hi there,
in the GP navigation, the parent menu item gets the class "sfHover" when clicking the item. This makes sense on touch devices. On desktop though when I now hover a different parent, the sub-menu stays open, they even overlap due to our menu design.
I tried following this thread: https://generatepress.com/forums/topic/onclick-primary-menu-issues/ to remove the the sfHover class when hovering parent menu items and made that work.
Unfortunately, now when clicking anywhere else, the class "sfHover" comes back and all submenu items are suddenly open. This keeps happening. There must be something like a classToggle when clicking outside the element and javascript knows which elements had been touched before?
The fsHover class is great for all touch devices! Is there anyway I can still close the submenus when hovering a different parent for desktop?
Hope you can help!
Hi there,
can you share a link to your site where i can see the issue ?
Hi David,
sorry it took a bit. I had to make sure the site-owner knows that I have a "bug" enabled at the moment.
The Link is in the private information.
Is there any particular browser or device this happens on?
As i can't see the issue on my mac
The exact description happens in Brave. In Chrome and Firefox it's very similar.
Click on the menu item "Fulfillment" and then go to "Beratung" - or the other way around.
Hope you can reproduce!
Hi Niklas,
Can you try removing the code first and we'll see what's going on without the code?
Hi Fernando,
sure, the custom code is removed.
Thank you!
What Navigation Dropdown setting are you using? Reference: https://docs.generatepress.com/article/navigation-dropdown/
To clarify, are you using Hover, and wanting only "hover" and no onclick sfHover on Desktop?
Hi Fernando,
> To clarify, are you using Hover, and wanting only “hover” and no onclick sfHover on Desktop?
yes, exactly. We are using the hover setting for the navigation and we don't want the submenus to open (or mainly to stay open) when clicking an item and then hovering over the next.
Try adding this through Appearance > Customize > Additional CSS instead:
@media (min-width: 1025px){
body .main-navigation:not(.toggled) ul li.sfHover > ul{
opacity: 0;
}
body .main-navigation:not(.toggled) ul li.sfHover:hover > ul{
opacity: 1;
}
}Perfect, thank you! That totally works.
It's always the simplest solutions I guess...
You're welcome, Niklas!
