Mega menu dropdown height issue

Hello,

Thanks for your Patience!

We were just investigating your issue and yes there is a Bug with the Code. We are working on this and will release an Update later this week. We will provide you with a quick guide to update the codes to fix this once we are ready with the solution.

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

Hello,

Thank You so much for your Patience!

We are still putting together all the updates and documenting it. Please allow us till Monday to provide you with an Update regarding this.

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

Hello,

Thank You so much for your Continued Patience and Apologies about the Delays!

We have been working on incorporating these updates tirelessly and it will be released within the next 24 Hours! Meanwhile, here is the Update for you:

1. Update the 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
	});

},

1. Add the following CSS Code:

#primary-menu ul li .mega-menu-content {
	display: -ms-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: stretch;
	align-items: stretch;
}

#primary-menu ul li .mega-menu-content ul.mega-menu-column.col-5 {
	width: 20%;
	-ms-flex: 0 0 20%;
	flex: 0 0 20%;
	max-width: 20%;
}

@media (max-width: 991.98px) {
	#primary-menu ul li .mega-menu-content ul.mega-menu-column {
		width: auto;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

This should definitely fix the issue. 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.

Hello,

Glad that the issue has been resolved. Yes, this has been included in the Latest Version which is now available for Download.

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