Navigation delay

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?

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!

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.

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.

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:

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

Hey Morr,

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

Thanks.

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

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.

Great! (: Thanks

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.

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.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.