Remove ALL transitions from menus?

[mircotripoczky]

I was able to remove the transitions from menu items (with or without dropdowns) and the dropdowns as well when hovering a menu item using some css, but there is still a delay when leaving a menu item (including the dropdown if it has one). I guess it’s related to a JS, that adds/removes classes.

Is there a way to disable ALL transitions that are connected to a menu or where is the JS to edit it?

[nabeel]

Hi @mircotripoczky ,

Thank you for reaching out to us. 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!

[mircotripoczky]

Thanks for the quick response.

This css is similar to the one I already wrote… unfortunately it doesn’t influence the delay when leaving a menu item. Small delay when there is no dropdown and longer (wonder why) if it has a dropdown menu.

[nabeel]

Hey @mircotripoczky,

The menu item when hovered, there is a JS script in the theme which adds a class x-active to the menu items, this class is being controlled by the JS script thus we have limited options to reduce the delay. Try this, In your Global CSS you should have this code:

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

Then add the following script in the Theme Options > JS

jQuery(document).ready(function($){
	$('.menu-item > a').hover(function(){
		$(this).addClass('x-active');
	}, function(){
		$(this).removeClass('x-active');
	});
});

I tested the code in my local setup and it works as expected, the delays are almost reduced to zero.

Regretfully this is only how far the css and JS can reduce. Totally removing the delay would require complete JS recoding and this is not recommended.

Thank you for understanding!

[mircotripoczky]

It’s not possible by alternating the responsible JS via a child theme?

PS: The “almost reduced to zero” is fine. Maybe consider to add an option at the element properties for delay, on, off, duration etc.) somewhere in the future

Thanks for your help.

[nabeel]

Hey @mircotripoczky,

Regretfully no, we can’t alter the JS functionality via child theme, that requires editing the parent theme which is not recommended at all. Please try the above suggestion and it should work fine now.

Cheers!