PRO Header: Remove Dropdown Animations

[Nuera]

Hi there,

I’ve read the few threads about changing the dropdown animations in the Header builder, so hopefully this request is an easy enough fix.

Basically, I want to remove the header animation entirely. Unfortunately, it is not value-added and gives the UX an extremely sluggish feel. Ideally, the dropdown would simply appear the instant the user hovers over the menu item without delay or animation.

Can you help me with this?

Thanks!

[mldarshana]

Hi Nuera,

Thanks for writing in! The following CSS is currently set for the dropdown.

.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;
}

You can change it according to your requirement and then add it into your Pro -> Theme Options -> CSS area and see if that helps.

Thanks!

[Nuera]

Thanks Darshana!

Unfortuantely, I’m not actually sure what I should be changing here. Would it be possible for your to provide me a snippet that removes all animation and delay?

Thank you so much for your help!!

[nabeel]

Hi again,

To remove the delay and the animation, simply add the following code in the Theme Options > CSS:

body .x-masthead .x-dropdown,
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;
}

It may still has a bit of a delay when you hover out because the JS script is doing so and it may need a different approach. Please add the following code as well

@media ( min-width: 980px ) {
     
        li.menu-item-has-children > ul {
         display: none !important;   
        }
        
        li.menu-item-has-children:hover > ul {
         display: block !important;   
        }
        
}

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

[Nuera]

I think that’ll work nicely for now - thanks all!

[matt]

Happy to hear that, Nuera. Have a great day!