[Resolved] Disable menu animation on hover

[themedleb]

My main menu shows sub-menus with a slightly slow animation when it’s on cursor hover, I want it to be instant, how can I do this?

[Tom]

I could give you some javascript, but it will be deprecated in GP 2.0 which is scheduled for beta released early next week.

In GP 2.0, it uses pure CSS, which means you can remove the transition super easily.

Do you want me to update this topic once 2.0 is ready for testing?

[themedleb]

Oh, okay, I would prefer CSS instead, I can wait.

And yeah, sure.

Thank you.

[Tom]

Will do – thanks!

[Tom]

I just released GP 2.0-alpha.1: https://generatepress.com/generatepress-2-0-alpha-beta/

If your site has a lot of traffic, I suggest creating a staging site to test it out before updating on the live site 🙂

To remove the transition, try this:

.main-navigation ul ul {
    transition: opacity 0s linear;
}

.dropdown-hover .main-navigation ul li:hover > ul {
    transition-delay: 0s;
}

[themedleb]

After testing, it works as expected.

Thank you Tom.

[Tom]

You’re welcome, and thanks for testing 2.0! 🙂

[themedleb]

2.0 worth testing, waiting for the final impatiently.

[Author]

Posts