Pro header - Dropdown animation

[adequasys]

Hi there,

I have read different threads on how to remove dropdown animations, as it is overlayed one to the other… so it is really ugly.

I have added following CSS and JS to the theme option. It removes the fade-in/out, but there is still a delay of a few seconds when it should disappear. Could you please help me?

body .x-masthead .x-anchor,
body .x-masthead .x-interactive,
body .x-masthead .x-dropdown.x-active {
transition-delay: 0s, 0s, 0s !important;
transition-duration: 0s, 0s, 0s !important;
transform: translate3d(0, 0, 0) !important;
}

@media ( min-width: 980px ) {

    li.menu-item-has-children > ul {
     display: none !important;   
    }
    
    li.menu-item-has-children:hover > ul {
     display: block !important;   
    }

}

[lely]

Hello There,

Thank you for the complete information.
Please try this instead. On Pro Header Editor > Inspect Bar where this menu is located > then click Customize Tab > Element CSS:

Then use this custom CSS:

 $el .x-anchor, 
 $el .x-anchor-text-primary,
 $el .x-anchor-text-secondary,
 $el .x-anchor-sub-indicator,
 $el .x-dropdown {
    transform: none;
    transition-delay: unset;
    transition-duration: unset;
    transition-property: none;
    transition-timing-function: unset;
}

This is to make sure too, that CSS will only work on the links inside that menu and will not affect other buttons or links on the footer or other places.

Hope this helps.

[adequasys]

Hi, thanks, it doesn’t change anything.

[christian]

Hey @adequasys,

The delay is powered by Javascript and its purpose is to give the user time to go back to the menu in case the cursor gets out of the menu area accidentally which is quite a common irritant to website users.

You can override the behavior with a custom JS like the code below. Insert the code in Theme Options > JS

jQuery(function($) {
	$('.menu-item').mouseleave(function () {
		$( this ).children('.x-dropdown').removeClass('x-active')
	})
})

If you want to speed up both mouse enter and mouse leave, use hover like the code below. Just note that like what I’ve said above, if the user’s cursor gets in the menu accidentally, it would open the submenu fast which is mostly an unwanted behavior also.

jQuery(function($) {
	$('.menu-item').hover(function () {
		$( this ).children('.x-dropdown').removeClass('x-active')
	})
})

Please just note that this is not a supported behavior yet for the reason I said above.

Hope that helps.

[christian]

If the code I’ve provided does not work or if you’d like a CSS solution. Please add this code provided by my colleague @Ruenel.

.menu-item > .x-dropdown {
    visibility: hidden;
    opacity: 0;
}

.menu-item:hover > .x-dropdown {
    visibility: visible;
    opacity: 1;
}

If both suggestions still doesn’t work, please consult with a third party developer.

Thanks.

[adequasys]

Thanks, it works well!

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.