Transition speed between links

[crosstownalliance]

Hello! We’re modeling our site http://crosstownalliance.com/ with similar effects like this site https://www.churchofthehighlands.com/

In the navigation bar, if you hover over “About Us” on our site, and “About” on theirs. Then hover down. You might see a noticeable difference in speed. Hovering from link to link is SO much faster on their site, It almost “clicks” when you hover over it. However, on our site, it is much slower and takes a few seconds to actually hover over it.

Is there a way I can change this? And, how?

Even the buttons on their site are running SO much faster. I’m thinking it’s something to do with transition or the hover speed. But I’ve put this code in and it does seem to improve it but it’s not as fast as I hope it can be. Is this something I can’t change after all?

Code used:

/* snappier menu drop down */
body .x-dropdown,
body .x-dropdown.x-active {
transition-duration: 0s;
}

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

body .x-menu > li:hover > .x-dropdown {
opacity: 100;
visibility: visible;
transition-duration: 0s;
}

body .x-menu > a:hover > .x-dropdown > a:hover a {
opacity: 100;
visibility: visible;
transition-duration: 0s;
}

.x-menu .x-dropdown > a:hover a {
transition-duration: 0s;
}

[nabeel]

Hey Gordon,

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

The snippet above will minimize the delay to almost 0, if you still feel any then you can additionally 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. Customizing it further would require complete JS recoding and this is not recommended.

Thank you for understanding!

[crosstownalliance]

Amazing! Plugged those two codes in and it works beautifully. Thank you!

Now, to get the whole site to respond this fast, what coding do I need to change? So instead of it saying body .m-masthead…what would it be instead?

[christian]

You’re welcome, Gordon.

To remove all transition for all elements in your site, please try replacing these selectors:

body .x-masthead .x-dropdown,
body .x-masthead .x-anchor,
body .x-masthead .x-interactive,
body .x-masthead .x-dropdown.x-active

with this body *. So it would be:

body * {
    transition-delay: 0s, 0s, 0s !important;
    transition-duration: 0s, 0s, 0s !important;
    transform: translate3d(0, 0, 0) !important;
}

Hope that helps.

[crosstownalliance]

Worked!! Thank you SO MUCH!

[Prasant]

You are most welcome.