Return to previous page

Menu Items Animation Effect - by thisisbolo

This topic has 12 replies, 2 voices, and was last updated 5 years, 5 months ago ago by Rose Tyler

thisisbolo

Participant

November 6, 2018 at 20:06

Is there a way to change the fadein / fadeout animation on the menu hover items? to make it slide down?

if not, how do i disabled the fadein/fadeout effect?

#202547 Copied

11 Answers
Rose Tyler

Support staff

November 7, 2018 at 09:10
Hello,
```
.menu-item-has-children:hover .nav-sublist-dropdown, li:hover .nav-sublist-dropdown {
    animation: unset;
}
```
Regards
#202558 Copied
thisisbolo

Participant

November 7, 2018 at 15:46

Hi Rose – I’ve had no success with above and can’t seem to overwrite it with !important; Can you take a look? I’ve like to kill the fadeIn/fadeOut all together and remove the delay. See private content.

Please, contact administrator
for this information.

#202593 Copied
Rose Tyler

Support staff

November 7, 2018 at 16:27
Hello,

Please try this code:
```
.menu-item-has-children:hover .nav-sublist-dropdown, li:hover .nav-sublist-dropdown {
    animation-duration: 0s;
}
```
Regards
#202596 Copied
thisisbolo

Participant

November 7, 2018 at 19:26
I’m still having no luck killing the fadeIn effect. It’s some how set in stone somewhere. What I’m trying to do is kill the fadein fadeout effect and make the menu slide down on hover but I can’t seem to get it working properly. Almost there but it’s a bit quirky. Thoughts?
```
jQuery(document).ready(function($){
   $('.menu-wrapper>.menu-main-container>.menu>.item-with-block').on('mouseover', function() {
   	$('.menu-static-block.nav-sublist-dropdown').slideToggle();
   });
   $('.menu-wrapper>.menu-main-container>.menu>.item-with-block').on('mouseleave', function() {
   	$('.menu-static-block.nav-sublist-dropdown').slideToggle();
   })
});
```
#202606 Copied
Rose Tyler

Support staff

November 8, 2018 at 08:27
Hello,

Please add this custom css code:
```
.nav-sublist-dropdown {
    transform: translateY(-20px);
    transition-duration: .2s;
    animation: none;
    display:  block;
    opacity: 0;
    visibility: hidden;
}
.menu-item-has-children:hover .nav-sublist-dropdown, li:hover .nav-sublist-dropdown {
    transform: translateY(0px);
    animation: none;
    opacity: 1;
    visibility: visible;
}
```
Regards
#202609 Copied
thisisbolo

Participant

November 8, 2018 at 16:48

Hi Olga, thank you. Still the ‘animation’ parameter for the .nav-sublist-dropdown can’t be overwritten. Were you albe to successfully do this on your end?

#202677 Copied

Rose Tyler

Support staff

November 8, 2018 at 17:06

Hello,

I don’t know why it does not work for you but we have added our custom code at the very top of the child theme style.css on your production site and everything works fine.
Maybe you wanted to implement another effect then provide us with an example for better understanding.

Regards

#202681 Copied

thisisbolo

Participant

November 8, 2018 at 17:49

Thanks Rose. Can we pull the link off the last response. And then delete this message. Thanks!

#202686 Copied
thisisbolo

Participant

November 8, 2018 at 18:06
Rose/Olga, it worked! Thank you. I took your suggestion and swizzled it around. Don’t even need the jQuery I initially thought I did.
```
.nav-sublist-dropdown {
    transition-duration: .5s;
    animation: none;
    display:  block;
    opacity: 1 !important;
    visibility: hidden;
    overflow-y: hidden;
    max-height: 0;
    transition-property: all; 
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.menu-item-has-children:hover .nav-sublist-dropdown, li:hover .nav-sublist-dropdown {
    animation: none;
    opacity: 1 !important;
    visibility: visible;
    max-height: 500px; /* approximate max height */

}
```
#202688 Copied
thisisbolo

Participant

November 8, 2018 at 19:16

Hi Olga – can we pull the link off this please? Thanks.

I also noticed, for some bizarre season, if I have the css below this css –> body {font-family: “proxima-nova”, sans-serif !important; -webkit-font-smoothing: antialiased !important;}, the animation doesn’t work. it needs to be above the body css. Never seen that one before.

#202696 Copied

Rose Tyler

Support staff

November 9, 2018 at 09:07

Hello,

You’re welcome!

Regards

#202710 Copied
Viewing 12 results - 1 through 12 (of 12 total)