On mobile devices menu closes on click instead of going to the link

Hello,

With the Latest Updates of Canvas, Superfish Menu was disabled on Mobile Devices and replaced with the OnClick Mobile Menus which shows/hides the Sub-Menus on clicking the Parent Menu items. However, the Parent Menu Items are then disabled, which we definitely understand is not an ideal user experience. We have been working on this and have come up with a Solution to introduce a Sub Menu Trigger. Please consider following the Steps below:

1. Add this CSS Code:

#primary-menu i.sub-menu-trigger { display: none; }

@media (max-width: 991.98px) {
	#primary-menu i.sub-menu-trigger {
		display: block;
		position: absolute;
		top: 9px;
		left: auto;
		right: 0;
		width: 32px;
		height: 32px;
		line-height: 32px;
		font-size: 16px;
		text-align: center;
		background-color: #FFF;
		border: 1px solid #EEE;
		border-radius: 50%;
		cursor: pointer;
		z-index: 2;
	}

	#primary-menu ul ul i.sub-menu-trigger { top: 6px; }
}

1. Replace the entire menufunctions: function() Function Block in the js/functions.js File with the following code:

menufunctions: function(){

	$( '#primary-menu ul li:has(ul)' ).addClass('sub-menu');
	$( '#primary-menu ul li:has(ul):not(.mega-menu-column,.mega-menu-title)' ).append('');
	$( '.top-links ul li:has(ul) > a, #primary-menu.with-arrows > ul > li:has(ul) > a > div, #primary-menu.with-arrows > div > ul > li:has(ul) > a > div, #page-menu nav ul li:has(ul) > a > div' ).not(':has(.icon-angle-down)').append( '' );
	$( '.top-links > ul' ).addClass( 'clearfix' );

	if( $body.hasClass('device-xl') || $body.hasClass('device-lg') ) {
		$('#primary-menu.sub-title > ul > li').hover(function() {
			$(this).prev().css({ backgroundImage : 'none' });
		}, function() {
			$(this).prev().css({ backgroundImage : 'url("images/icons/menu-divider.png")' });
		});

		$('#primary-menu.sub-title').children('ul').children('.current').prev().css({ backgroundImage : 'none' });
	}

	if( $('#primary-menu').hasClass('on-click') || ( $body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs') ) ) {
		$('#primary-menu:not(.on-click) > ul, #primary-menu:not(.on-click) > div > ul:not(.dropdown-menu)').superfish('destroy');
		$('#primary-menu li:has(ul) i.sub-menu-trigger').on( 'click touchend', function(e){
			$(this).parents('.sub-menu').siblings().find('ul,.mega-menu-content').removeClass('d-block');
			$(this).parent('li').children('ul,.mega-menu-content').toggleClass('d-block');
			if( $(this).hasClass('icon-angle-down') ) {
				$(this).removeClass('icon-angle-down').addClass('icon-angle-up');
			} else {
				$(this).removeClass('icon-angle-up').addClass('icon-angle-down');
			}
			var megaMenuContent = $(this).parent('li').children('.mega-menu-content');
			setTimeout( function(){
				if( megaMenuContent.find('.owl-carousel.customjs').length > 0 ) {
					megaMenuContent.find('.owl-carousel').removeClass('customjs');
					SEMICOLON.widget.carousel();
				}
				if( megaMenuContent.find('.grid-container').length > 0 ) {
					megaMenuContent.find('.grid-container').isotope('layout');
				}
			}, 400);
			e.preventDefault();
		});
	}

	if( $('.top-links').hasClass('on-click') || ( $body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs') ) ) {
		$('.top-links:not(.on-click) > ul').superfish('destroy');
		$('.top-links li:has(ul,.top-link-section) > a').on( 'click touchend', function(e){
			$(this).parents('li').siblings().find('ul,.top-link-section').removeClass('d-block');
			$(this).parent('li').children('ul,.top-link-section').toggleClass('d-block');
			e.preventDefault();
		});
	}

},

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Very Happy to Help! Thank You so much for the Kind Words! :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.