Canvas Support

Mega menu doesn't close after browser resize

5 replies · opened Nov 19, 2019

PPeadeyNov 19, 2019

Hi Folks,

index-corporate.html

Two strange little bugs after resizing the browser window from big to small (and back):

  1. When I scroll down in the small window (with the hamburger menu) and scroll up again: the color of the menu changes.
  2. After resize back to big window: eventually opened menus from the hamburger remain open and will not close anymore.

Please confirm this behavior and - if you have a solution - please inform me about the changes: I have to update the files manually.

Thank you very much,

Peter

SSemicolon WebSTAFFNov 23, 2019

Hello,

  1. Please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

  2. Please follow the steps below to fix this:

a. 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');
	}

},

b. 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();
		});
	}

},

c. 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.

SSemicolon WebSTAFFNov 25, 2019

Hello,

Apologies about the Inconveniences caused!

This has been created this way to minimize repaints during Browser Resize which causes a lot of JS overhead memory and slows up the Page. Considering the actual user would never resize your Page to view your website, this should not degrade the user experience. However, we will definitely try looking into this and try providing you with a better solution.

Regarding the Arrow issue on the Top Bar, consider finding the following code in the js/functions.js File inside the menufunctions: function() Function Block: 

.top-links ul li:has(ul) > a

and replace it with:

.top-links ul li:has(ul) > a:not(:has(.icon-angle-down))

This will definitely fix this issue. Hope this Helps!

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

PPeadeyNov 25, 2019

Thank you very much for your response. I think I can live with that, for now. Let's see if my customer discovers this. Probably you're right and this will never happen :-)

The problem with the JS overhead (caused by resizing) is familiar to me since I wrote the entire JS-resize-behavior for another BIG web application. It's still quite fast, despite a LOT of item resizing - but honestly: I'm not really happy with that, too... On the other hand: the fact that this kind of resizing will not happen too often, could be also a reason to say: let's run the whole JS stuff while resizing for these few times - why not. It depends on the viewpoint.

Again: big thanks for all your work: it is really an amazing template! I currently cut it in pieces for a modular umbraco-CMS site, so the editors can choose freely which parts they want to use. These guys are happy and me too!

SSemicolon WebSTAFFNov 26, 2019

Hello,

Thank You so much for your Patience and your Understanding!

As much as we hate these issues as well, we are always working on improving the experience on Browser Resizing and make it as less noticeable as possible. We are already working on a New Solution for this as we speak and hope to release an Update very soon. And we will definitely keep you in the Loop!

Thank You so so much for the Kind Words! And Really Glad that you has a Good Experience using Canvas! It has made our day! :)

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

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