Hover Transition Submenu Items Header Builder Pro

[iTurtle]

hi there,
is there a way to speed up the hover effect of submenu items? or even turn it off?
thanks a lot! kai

[nabeel]

Hi there,

Thank you for reaching out to us! The menu item when hovered, there is a JS script built in the theme to add a class 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 bit of a delay 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.

[iTurtle]

dear nabeel! thanks so much for this code! the fade effect is gone now - but the delay is still the same. meaning i still see the former submenu while going to the next submenu (moving from one top level menu item to the next). please have a look at the website mentioned in the secure note.
also please check for the menu item “über uns”. choose the first sub-link and click on it. then go back to the menu item “über uns” and all! 3 sub-links are highlighted. only the first one should be. that does not happen with any other sub-link. any idea why that is?
thanks a million! kai

[rad]

Hi @iTurtle,

The toggled class in the menu is applied through javascript so it may need a different approach. Please add this 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;   
        }
        
    }

Cheers!

[iTurtle]

dear rad,
fantastic. thanks a lot! that speeds up the menu dropdowns just as i hoped
but the other problem where all the pages in the submenu are highlighted and not only one as it shoud be persists. any idea what is causing this? it happens only in the mentioned main menu button labeled “über uns”.
thanks again! kai

[rad]

Hi @iTurtle,

It’s due to this custom javascript,

setInterval ( function(){ 

jQuery('.current-menu-item a').addClass('x-active');
jQuery('.current-menu-item a .x-particle').addClass('x-active');

 }, 500 );

Please remove it, or change it to this

setInterval ( function(){ 

jQuery('.current-menu-item > a').addClass('x-active');
jQuery('.current-menu-item > a .x-particle').addClass('x-active');

 }, 500 );

The problem with selector without >, it will apply x-active to all links including the links in the sub-menu.

Thanks!

[iTurtle]

hi @rad, you are my hero! thanks a million. now the menu is perfect have a great sunday! kai

[rad]

Glad I could help, and you’re most welcome!