Canvas Support

Transparent Headers v5 to v6

1 reply·opened Jun 11, 2020
P
pardthemonsterJun 11, 2020

I am trying to replicate prior behavior in v5 for my home page with a transparent header and dark video background, v5 code:
<header id="header" class="transparent-header" data-sticky-class="not-dark">

This allowed me:

on desktop browsers to have light color menu items when transparent header was active and when scrolling down with sticky header would have white background with dark menu items.

on mobile browsers to have white background with dark menu items all the time including when sticky (transparent header was never active).

For v6 code the best I have been able to do to replicate this is:
<header id="header" class="transparent-header dark" data-mobile-sticky="true" data-sticky-class="not-dark">

However, now the issue I run into is mobile browser headers have dark backgrounds when not sticky (ISSUE) and white when.

S
SemiColonWebSTAFFJun 13, 2020

Hello,

Thanks for your Patience!

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

<header id="header" class="transparent-header dark" data-mobile-sticky="true" data-sticky-class="not-dark" data-responsive-class="not-dark">

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.

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