Pro | Header Builder, Dropdown, Delay

[ERES]

Hi guys,

how I can remove the delay from the top links? I already used:

body .x-dropdown,
body .x-dropdown.x-active {
transition-duration: 0s;
}

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

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

So the dropdown disappear very fast, but the active-state from the top links stays a second longer.

Best and thank you!

[ruenel]

Hello There,

Thanks for writing in! The menu item when hovered, there is a JS script built in the theme to add a custom x-active in the menu item. You can reduce the time by using this code:

body .x-anchor,
body .x-interactive,
body .x-dropdown,
body .x-dropdown.x-active {
  transition-duration: 0s !important;
}

It may still has a second or two when you hover out because the JS script is doing so. Regretfully this is only how far the css can reduce. Totally removing the delay would require complete JS recoding and this is not recommended.

Thank you for your understanding.

[ERES]

I need to kill the delay and I found the JS-file.
Which part I have to edit?

Best

[ruenel]

Hello There,

We do not recommend modifying the JS file. It is a minified file and modifying it would require all the necessary library for the JS file. I made some custom css that you can use in addition to what I already gave you. Please add this code as well.

body .hm11.x-menu > li > .x-anchor,
.hm11.x-menu > li > .x-anchor[class*="active"] {
    background-color: rgb(0,117,184) !important;
    transition-property: none;
    box-shadow: none !important;
    border: none !important;
}

body .hm11.x-menu > li > .x-anchor:hover {
    background-color: hsl(0,0%,0%) !important;
}

body .hm11.x-menu > li > .x-anchor .x-particle {
    display: none;
}

This should bypass the interaction in your menu.

Please let us know if this works out for you.

[ERES]

You are my hero, it works! Thank you very much!

[christian]

You’re welcome.