Change Header's animations duration

Support
#1

Hello,

I’m trying to use custom CSS and classes to change the transition-delay and transition-duration styles on my Pro Header, but I’m having trouble doing so.

Can you point out a way to make my transitions a little bit faster? Currently the x-dropdown looks like this:
.x-dropdown { visibility: hidden; position: absolute; margin: 0; padding: 0; opacity: 0; transform: translate3d(0, 5%, 0); transition-delay: 0s, 0s, 0.5s; transition-duration: 0.5s, 0.5s, 0s; transition-property: opacity, transform, visibility; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 9999;

Here’s one page with this header applied: (link removed)

Thank you

#2

Hi,

To make it fast, you can add this in PRO > Launch > Theme Options > CSS

.x-dropdown.x-active,
.sub-menu, .x-dropdown {
    transition-delay: 0s;
    transition-duration: 0s;
}

Hope that helps.

1 Like
#3

Thanks Paul, it worked :slight_smile:

#4

Glad that we could be of a help :slight_smile:

#5

This works great for me too, thanks, but now as I move from one nav item to the next the previous dropdown remains while the new one opens… which is strange. Pls have a look:
http://cbac.robstrickland.net/well-thats-weird/

regards,
Rob

#6

Hi @Rob_Strickland,

Thanks for writing around! Can you please try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.menu-item.menu-item-has-children').hover(function(){
		$(this).find('.sub-menu').addClass('x-active');
	}, function(){
		$(this).find('.sub-menu').removeClass('x-active');
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

1 Like