[Resolved] Submenu hover bug

[Adrien]

Hello Team,

I have a bug on my submenu with hover option enabled. When I click the main menu it combines both option: show on hover and show on click.
I’d like to only hover to show submenu and even if people click when you hover out I’d not like to see the submenu staying.
I made this quick video to show you my issue: https://www.awesomescreenshot.com/video/7697075?key=23406932f8b146c63e41a2e469fe91ca

Please note that im on PHP 8.

Thank you.

[David]

Hi there,

thanks for the video 🙂
Can you disable ALL optimization plugins ( eg. Perfmatters etc. ) and clear any caches so i can then take a closer look?

[Adrien]

Hello @David, all were already disabled 😉 You may take a look when you can.
Thanks for your help.

[David]

Can you remove the GP Premium plugin and reinstall a new copy from your Account > Downloads ?

[Adrien]

Done but the bug is still there. I’ve even done a complete debug. I removed all plugins except GP/GP. Ive also tried removing all my elements.

[Adrien]

Hello @david. Just in case you forgot me 😉

[David]

Sorry we missed your last reply.
Can you provide us with a temporary admin login so we can take a closer look?

[Adrien]

Sure @david. I have enclosed to this message my WP credentials.

Appreciate your help.

[David]

Can you check the login URL as that is not working for me – it just redirects to the home page

[Adrien]

Oh my bad @david. Sorry ive sent the correct one.

[David]

Can you disable ALL of the opimization plugins ?

[Adrien]

done. LSCP we already off. I switched off Perfmatters.

[Ying]

Hi Adrien,

It is the normal behavior, it looks odd because you’ve added some style to the submenu on hover.

Options 1: Add the same style to sfHoverstate (click) submenu as well.
So change this CSS:

@media (min-width: 769px) {
    .main-navigation:not(.toggled) ul li:hover>ul {
        border-radius: 8px;
        padding: 18px;
        box-shadow: 0px 0px 14px 4px rgb(0 0 0 / 10%);
    }
}

to:

@media (min-width: 769px) {
    .main-navigation:not(.toggled) ul li:hover>ul, .main-navigation:not(.toggled) ul li.sfHover>ul {
        border-radius: 8px;
        padding: 18px;
        box-shadow: 0px 0px 14px 4px rgb(0 0 0 / 10%);
    }
}

Option 2: Ignore the sfHover state (click).
Add this CSS:

.main-navigation:not(.toggled) ul li.sfHover:not(:hover)>ul {
    opacity: 0 !important;
    height: 0;
    left: -99999px;
    visibility: hidden;
}
.main-navigation:not(.toggled) ul li.sfHover:not(:hover)>a {
    color: var(--base-3);
}

Let me know if this helps 🙂

[Adrien]

Dear Ying,

It worked perfectly. I chose option 1 😉

Thank you very much for your help.

[Ying]

You are welcome Adrien 🙂

[Author]

Posts