[Resolved] Exit animation in drop downs submenu

[Diogenes]

Hi.

I have seen this post that David answers: https://generatepress.com/forums/topic/menu-animation-feature/

I have applied this code and it works perfect:

#site-navigation ul ul {
    transform: translatey(6px); 
    transition: 0.15s ease-in;
}

#site-navigation ul li:hover ul {
    transform: translateY(0px); 
        transition: 0.15s ease-in;
}

#site-navigation:not(.toggled) ul ul {
	transition: opacity 0.35s linear;
}

It would be possible to apply the same style of the entrance animation (it appears faded from the bottom to the top), to the exit animation, but in the opposite, that is, when the mouse is removed it fades from the top to the bottom, as shown in the example page: https://www.herbertwoods.co.uk

I would greatly appreciate the help.
Greetings.

[Ying]

Can you link us to your site?

[Diogenes]

Thanks for the reply.
In the private information is the website,

[Ying]

Try change this CSS:

.main-navigation ul ul {
    transform: translatey(16px);
    transition: 0.15s ease-in;
}

to this:

.main-navigation ul ul {
    transform: translatey(16px);
    transition: all 0.35s ease !important;
    left: 0;
    height: auto;
}

[Diogenes]

I look spectacular 🤩
Thank you

[Ying]

No problem 🙂

[Author]

Posts