Menu linkeable (on MOBILE)

Hello,

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.