Issue on resizing with mega menu (on change orientation)

Hello,

Thanks for your Patience and Apologies about the Inconveniences caused!

We understand your concerns about this and thanks for pushing us to Fix this promptly. We will release an Update for this fix in Canvas 6, however, you can consider following the steps below to update this yourself:

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

superfish: function(){

	if( $body.hasClass('device-xl') || $body.hasClass('device-lg') ) {
		$('#primary-menu ul ul, #primary-menu ul .mega-menu-content').css('display', 'block');
		SEMICOLON.header.menuInvert();
		$('#primary-menu ul ul, #primary-menu ul .mega-menu-content').css('display', '');

		if( !$().superfish ) {
			$body.addClass('no-superfish');
			console.log('superfish: Superfish not Defined.');
			return true;
		}

		$('body:not(.side-header) #primary-menu:not(.on-click) > ul, body:not(.side-header) #primary-menu:not(.on-click) > div > ul:not(.dropdown-menu), .top-links:not(.on-click) > 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.find('.grid-container').length > 0 ) {
					megaMenuContent.find('.grid-container').isotope('layout');
				}
			}
		});

		$('body.side-header #primary-menu:not(.on-click) > ul').superfish({
			popUpSelector: 'ul',
			delay: 250,
			speed: 350,
			animation: {opacity:'show',height:'show'},
			animationOut:  {opacity:'hide',height:'hide'},
			cssArrows: false
		});

		$('#primary-menu ul ul, #primary-menu ul .mega-menu-content').css('display', 'none');
	}

},

1. Update 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');
	$( '.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' ).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) > a').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');
			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();
		});
	}

},

1. Find the following code in the js/functions.js File inside the SEMICOLON.documentOnResize > init: function() Function Block:

SEMICOLON.header.fullWidthMenu();

and replace it with:

SEMICOLON.header.superfish();
SEMICOLON.header.menufunctions();
SEMICOLON.header.fullWidthMenu();

This should fix the issue. Hope this Helps!

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

Hello,

Glad that your issues were resolved. Thanks for your Patience.

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