Canvas Support

Transparent Header Always Dark Option?

13 replies·opened Jun 15, 2021
P
pardthemonsterJun 15, 2021

Is there a more ideal way to make transparent headers always dark, but adaptive when non-transparent? (for times when the always dark background makes the need for light text AND light logo ONLY when header is transparent? The best I have found is this, but there is lag, and logo only changes after scrolling.

<body class="stretched adaptive-color-scheme">

	<!-- Document Wrapper
	============================================= -->
	<div id="wrapper" class="clearfix">

		<!-- Header
		============================================= -->
		<header id="header" class="transparent-header no-sticky" data-class-lg="dark" data-class-xl="dark">
S
SemiColonWebSTAFFJun 17, 2021

Hello,

Thanks for your Kind Patience and Apologies for the Delays in replying.

Unfortunately, the Lag is due to the JS being loaded as the Dark Logo is switched using JS Codes and as soon as the JS Codes are available, the Logo/Header Color Scheme is switched. Currently, the Adaptive Color Scheme works globally regardless of Responsive Devices. We will introduce more complex switching of the Classes in Adaptive Color Scheme with more updates.

Meanwhile, consider using the following JS Code at the bottom of the Page and let us know if this works fine for you:

<script>
	let winWidth = $(window).width();

	if( winWidth > 992 ) {
		let $header = $('#header');
		if( $header.hasClass('transparent-header') ) {
			$header.addClass('dark');
			SEMICOLON.header.logo();
		}
	}
</script>

Hope this Helps!

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

P
pardthemonsterJun 17, 2021

That works perfectly! Thanks and look forward to the continued great updates you release!

S
SemiColonWebSTAFFJun 17, 2021

Glad that the issue was resolved. Very Happy to Help! :)

We will continue churning new features and improvements.

S
SemiColonWebSTAFFMar 16, 2023

Hello,

This feature is currently not being added to Canvas 7 and must be applied manually using the following code:

if( SEMICOLON.Core.viewport().width > 992 ) {
	if( SEMICOLON.Core.getVars.elheader.classList.contains('transparent-header') ) {
		SEMICOLON.Core.getVars.elheader.classList.add('dark');
	}
}

Hope this Helps!

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

P
pardthemonsterMar 16, 2023

Tried this, but am getting an error:

undefined is not an object (evaluating 'SEMICOLON.Core.getVars.elheader.classList')

S
SemiColonWebSTAFFMar 16, 2023

Hello,

Apologies there was a typo in the code. Consider using this instead:

if( SEMICOLON.Core.viewport().width > 992 ) {
	if( SEMICOLON.Core.getVars.elHeader.classList.contains('transparent-header') ) {
		SEMICOLON.Core.getVars.elHeader.classList.add('dark');
	}
}

Hope this Helps!

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

P
pardthemonsterMar 28, 2023

Thanks for the help so far. It appears that a recent update made this functionality no longer work. Any ideas on what might have recently made this not work?

S
SemiColonWebSTAFFMar 28, 2023

Hello,

We have just checked this out and it still appears to be working fine for us. Additionally, there were no changes made to the Header/Dark Functionalities in the Latest Update. Can you please consider checking this again and confirm? Thanks for your Patience.

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

P
pardthemonsterMar 28, 2023

Not sure what would have caused it then, but when system is light, I still get a dark header when header is not transparent.

S
SemiColonWebSTAFFMar 29, 2023

Hello,

Try using this code replacing the existing codes:

const setHeaderScheme = () => {
	if( SEMICOLON.Core.viewport().width > 992 ) {
		if( SEMICOLON.Core.getVars.elHeader.classList.contains('transparent-header') && !SEMICOLON.Core.getVars.elHeader.classList.contains('sticky-header') ) {
			SEMICOLON.Core.getVars.elHeader.classList.add('dark');
		} else {
			SEMICOLON.Core.getVars.elHeader.classList.remove('dark');
		}
	}
};
setTimeout(() => {
	setHeaderScheme();
	window.addEventListener('scroll', () => {
		setHeaderScheme();
	}, {passive:true});
}, 666);

We have tested this and this should fix the issue. Since, currently Customization related Support is not included with the License according to the Item Support Policy: https://themeforest.net/page/item_support_policy and https://support.semicolonweb.com/support-policy/ . You will need to manually code this or Hire Us to help you out with Customizations: https://semicolon.lemonsqueezy.com/checkout?cart=6d738b39-d6d4-4a9c-8e5c-8df15195b036 .

Hope this Helps!

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

S
SemiColonWebSTAFFMar 30, 2023

Hello,

Thanks for Understanding and Glad the issues were resolved.

Yes, we were working on some Forum Improvements. Apologies for the Inconveniences caused, this has not been fixed.

Meanwhile, 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
Transparent Header Always Dark Option? · Canvas Template Support