It does fade in, but it instantly dissapears when moving the cursor away from the menu. We would like a fade out animation to happen instead of just dissapearin like it does now.
I wanted to get back on this, because it is a CSS thing which should be possible to change. It could be very well something easy, but I can't figure it out.
When I change the code; 'opacity 0.65s cubic-bezier(0.2,.8,.25,1)' to 'opacity linear 0.65s' the animation of the mega menu changes and with the 'linear' it does have a 'in' and 'out' animation. But for some reason the fade in from the cubic-bezier works, but it just does not fade out. I have tried changing or adjusting it, but nothing seems to work.
In the developer console I saw that when I hover over the menu item (so when the mega menu appears) the classes change from:
I am really looking for a fix, because I don't want my menu to just go away instantly. A slight fade out would be a lot better. And I think that this is something that the theme could use, not just for us. I now feels like as if the code was left abandoned when you guys wrote that piece of CSS. :)
After updating to the new 14.0 version the megamenu fade in & out animation no longer works. It doesn't even fade-in anymore. Can you please take a look at this? I can't seem to figure out exactly what caused the animation to stop working. ☹️
The CSS code is in the WordPress customizer instead of in the Salient CSS section.
Hi, can we make the megamenu / submenu fade out?
It does fade in, but it instantly dissapears when moving the cursor away from the menu. We would like a fade out animation to happen instead of just dissapearin like it does now.
Hey Again,
Please turn off the Caching/Minification Options temporarily and check if that makes a difference?.
Thanks
ThemeNectar Support Team
Hi,
Unfortunately this did not make a difference...
Is there something else that could cause it?
The demo website does not have a fade-out animation, so maybe it is not included in the theme?
Example: Salient - Responsive Multi-Purpose Theme Preview - ThemeForest
Hi Brian,
I am afraid, this is not possible with the theme at the moment.
Thanks.
Hi again,
I wanted to get back on this, because it is a CSS thing which should be possible to change.
It could be very well something easy, but I can't figure it out.
When I change the code; 'opacity 0.65s cubic-bezier(0.2,.8,.25,1)' to 'opacity linear 0.65s' the animation of the mega menu changes and with the 'linear' it does have a 'in' and 'out' animation. But for some reason the fade in from the cubic-bezier works, but it just does not fade out. I have tried changing or adjusting it, but nothing seems to work.
In the developer console I saw that when I hover over the menu item (so when the mega menu appears) the classes change from:
To:
And when I move my cursor to another menu item the classes change two times, the first time it goes to:
Before going back to:
I am really looking for a fix, because I don't want my menu to just go away instantly. A slight fade out would be a lot better.
And I think that this is something that the theme could use, not just for us. I now feels like as if the code was left abandoned when you guys wrote that piece of CSS. :)
Hey Again,
Thanks for the Details information.
Escalating this to the developer for further response.
Best
ThemeNectar Support Team
Hey Brian,
You can allow the megamenu to fade out by adding in the following CSS snippet:
.sf-menu > li > ul { transform: none; } #top nav > ul > li > ul > li { opacity: 1; }Kind regards,
This is amazing, thank you! It works perfectly. 😄
Hi,
After updating to the new 14.0 version the megamenu fade in & out animation no longer works.
It doesn't even fade-in anymore. Can you please take a look at this? I can't seem to figure out exactly what caused the animation to stop working. ☹️
The CSS code is in the WordPress customizer instead of in the Salient CSS section.
Thanks for your reply. 😊
Fixed it by adding 'transition: all 0.2s!Important;'
.sf-menu > li > ul { transform: none; transition: all 0.2s!important; }