Top Level Menus on Mobile Devices are currently not clickable

2 replies · opened Oct 21, 2019

Wwebteam_absoluteOct 21, 2019

Hi,

The Top Level Menus on Mobile Devices are currently not clickable and are used only as a Sub-Menu Open/Close Trigger.

Do you have codes to fix this issue until we have the new version of canvas to upgrade for the fix?

Thanks.

SSemicolon WebSTAFFOct 22, 2019

Hello,

Thanks for your Patience!

Please follow 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.

Wwebteam_absoluteOct 24, 2019

This works! Thanks for the solution. :)

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard