Transparent Headers v5 to v6

Hello,

Thanks for your Patience!

This is still possible in Canvas 6. Please consider using the following code:

However, there is a minor bug in the Sticky Header function for the Mobile Devices. Consider finding the following code in the js/functions.js File inside the stickyMenu: function( headerOffset ) Function Block:

if( $body.hasClass('device-xs') || $body.hasClass('device-sm') || $body.hasClass('device-md') ) {
	if( mobileSticky == 'true' ) {
		if( windowScrT > headerOffset ) {
			$header.filter(':not(.no-sticky)').addClass('sticky-header');
			SEMICOLON.header.stickyMenuClass();
		} else {
			SEMICOLON.header.removeStickyness();
		}
	} else {
		SEMICOLON.header.removeStickyness();
	}
	logo.find('img').css({ 'height': Number( mobileLogoH ) });
	SEMICOLON.header.menuItemsSpacing( '' );
}

and replace it with:

if( $body.hasClass('device-xs') || $body.hasClass('device-sm') || $body.hasClass('device-md') ) {
	if( mobileSticky == 'true' ) {
		if( windowScrT > headerOffset ) {
			$header.filter(':not(.no-sticky)').addClass('sticky-header');
			SEMICOLON.header.stickyMenuClass();
		} else {
			SEMICOLON.header.removeStickyness();
			SEMICOLON.header.responsiveMenuClass();
		}
	} else {
		SEMICOLON.header.removeStickyness();
	}
	logo.find('img').css({ 'height': Number( mobileLogoH ) });
	SEMICOLON.header.menuItemsSpacing( '' );
}

This will definitely fix the issue. Hope this Helps!

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