Navigation delay

[morrmeroz]

Hey! I’m building a custom header using pro and every-time I try to use a drop down navigation element there’s a rather long delay from the time of hovering to the time where the menu is revealed.

Any way to make it instant like it is on a regular menu?

[rad]

Hi Morr,

Thanks for reaching out.

The hover animation is triggered by javascript which the speed is affected by device’s performance. May I know which menu element you’re referring? Maybe it can be overriden by CSS>

Thanks!

[morrmeroz]

It happens with the dropdown navigation. You can check this page out to see it:
https://www.bloopanimation.com/aaa-header-test/

If you hover above the “blog” menu item you’ll see it takes it forever to pop.

[christian]

Hey Morr,

Please follow the solutions suggested in this similar thread https://theme.co/apex/forum/t/pro-header-dropdown-animation/54732/4?u=christian_y

Hope that helps.

[morrmeroz]

It makes it a bit faster but it’s still delayed. On a regular menu it’s just instant, and for some reason on a pro header menu it’s delayed.

Here is the same page with the regular header not using pro:

Bloop Animation

If you hover over “blog” again, you’ll see the result I’m trying to achieve.

[christian]

Hey Morr,

Have you tried the other solutions suggested in the thread including the CSS solution?

Thanks.

[morrmeroz]

Yep! The css wasn’t any better. What you’re seeing now is actually with the CSS on it… So not much better.

[christian]

Hey again,

Please try changing the CSS to this:

.menu-item > .x-dropdown {
    visibility: hidden;
    opacity: 0;
    transition: 0 !important;
}
.menu-item:hover > .x-dropdown {
    visibility: visible;
    opacity: 1;
}

Hope that helps.

[morrmeroz]

@christian_y

.menu-item > .x-dropdown {
visibility: hidden;
opacity: 0;
transition: 0 !important;
}
.menu-item:hover > .x-dropdown {
visibility: visible;
opacity: 1;
}

Great! (: Thanks

[morrmeroz]

What about a navigation dropdown element? Can you give me a code to make that fast too? Like when I click on the hamburger it takes forever for the animation and menu to appear.

[christian]

Please add this code. Or, try replacing the code I’ve given you first with this.

.x-dropdown {
    transition-delay: 0s !important;
    transition-duration: 0s !important;
    transition-property: none !important;
}
.x-dropdown.x-active {
    transition-duration: 0s !important;
    transition-property: none !important;
}

If it does not work, use both the previous and the recent code.

Thanks.