Mobile Menu Hover/Speed

LlawmotorsportsMay 3, 2016

The mobile menu is too fast.

I would like two options:

A. How do I change the hover speed of mobile menu?

B. How do I disable the hover animation for mobile Menu?

Thanks!

SSemicolon WebSTAFFMay 5, 2016

Hello,

You can find the superfish: function() Function Block in the js/functions.js File and then find the following code within it:

$('body:not(.side-header) #primary-menu > ul, body:not(.side-header) #primary-menu > div > ul, .top-links > ul').superfish({
	popUpSelector: 'ul,.mega-menu-content,.top-link-section',
	delay: 250,
	speed: 350,
	animation: {opacity:'show'},
	animationOut:  {opacity:'hide'},
	cssArrows: false,
	onShow: function(){
		var megaMenuContent = $(this);
		if( megaMenuContent.find('.owl-carousel.customjs').length > 0 ) {
			megaMenuContent.find('.owl-carousel').removeClass('customjs');
			SEMICOLON.widget.carousel();
		}

		if( megaMenuContent.hasClass('mega-menu-content') && megaMenuContent.find('.widget').length > 0 ) {
			if( $body.hasClass('device-lg') || $body.hasClass('device-md') ) {
				setTimeout( function(){ SEMICOLON.initialize.commonHeight( megaMenuContent ); }, 200);
			} else {
				megaMenuContent.children().height('');
			}
		}
	}
});

and replace it with the following code:

if( windowWidth  ul, body:not(.side-header) #primary-menu > div > ul, .top-links > ul').superfish({
		popUpSelector: 'ul,.mega-menu-content,.top-link-section',
		delay: 250,
		speed: 350,
		animation: {opacity:'show'},
		animationOut:  {opacity:'hide'},
		cssArrows: false,
		onShow: function(){
			var megaMenuContent = $(this);
			if( megaMenuContent.find('.owl-carousel.customjs').length > 0 ) {
				megaMenuContent.find('.owl-carousel').removeClass('customjs');
				SEMICOLON.widget.carousel();
			}

			if( megaMenuContent.hasClass('mega-menu-content') && megaMenuContent.find('.widget').length > 0 ) {
				if( $body.hasClass('device-lg') || $body.hasClass('device-md') ) {
					setTimeout( function(){ SEMICOLON.initialize.commonHeight( megaMenuContent ); }, 200);
				} else {
					megaMenuContent.children().height('');
				}
			}
		}
	});
} else {
	$('body:not(.side-header) #primary-menu > ul, body:not(.side-header) #primary-menu > div > ul, .top-links > ul').superfish({
		popUpSelector: 'ul,.mega-menu-content,.top-link-section',
		delay: 250,
		speed: 350,
		animation: {opacity:'show'},
		animationOut:  {opacity:'hide'},
		cssArrows: false,
		onShow: function(){
			var megaMenuContent = $(this);
			if( megaMenuContent.find('.owl-carousel.customjs').length > 0 ) {
				megaMenuContent.find('.owl-carousel').removeClass('customjs');
				SEMICOLON.widget.carousel();
			}

			if( megaMenuContent.hasClass('mega-menu-content') && megaMenuContent.find('.widget').length > 0 ) {
				if( $body.hasClass('device-lg') || $body.hasClass('device-md') ) {
					setTimeout( function(){ SEMICOLON.initialize.commonHeight( megaMenuContent ); }, 200);
				} else {
					megaMenuContent.children().height('');
				}
			}
		}
	});
}

You can then simply change the 350 value in the speed: 350 for the if( windowWidth < 992 ) Condition to your required speed time in milliseconds.

To disable the Hover Animation, use the following code:

if( windowWidth > 991 ) {
	$('body:not(.side-header) #primary-menu > ul, body:not(.side-header) #primary-menu > div > ul, .top-links > ul').superfish({
		popUpSelector: 'ul,.mega-menu-content,.top-link-section',
		delay: 250,
		speed: 350,
		animation: {opacity:'show'},
		animationOut:  {opacity:'hide'},
		cssArrows: false,
		onShow: function(){
			var megaMenuContent = $(this);
			if( megaMenuContent.find('.owl-carousel.customjs').length > 0 ) {
				megaMenuContent.find('.owl-carousel').removeClass('customjs');
				SEMICOLON.widget.carousel();
			}

			if( megaMenuContent.hasClass('mega-menu-content') && megaMenuContent.find('.widget').length > 0 ) {
				if( $body.hasClass('device-lg') || $body.hasClass('device-md') ) {
					setTimeout( function(){ SEMICOLON.initialize.commonHeight( megaMenuContent ); }, 200);
				} else {
					megaMenuContent.children().height('');
				}
			}
		}
	});
}

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

LlawmotorsportsMay 5, 2016

Thank you!