Transparent Header Always Dark Option?

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:
[ch_pre]<script>
let winWidth = $(window).width();

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

</script>[/ch_pre]

Hope this Helps!

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

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

We will continue churning new features and improvements.

Hello,

This feature is currently not being added to Canvas 7 and must be applied manually using the following code:
[ch_pre type="js"]if( SEMICOLON.Core.viewport().width > 992 ) {
if( SEMICOLON.Core.getVars.elheader.classList.contains('transparent-header') ) {
SEMICOLON.Core.getVars.elheader.classList.add('dark');
}
}[/ch_pre]

Hope this Helps!

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

Hello,

Apologies there was a typo in the code. Consider using this instead:
[ch_pre type="js"]if( SEMICOLON.Core.viewport().width > 992 ) {
if( SEMICOLON.Core.getVars.elHeader.classList.contains('transparent-header') ) {
SEMICOLON.Core.getVars.elHeader.classList.add('dark');
}
}[/ch_pre]

Hope this Helps!

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

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.

Hello,

Try using this code replacing the existing codes:
[ch_pre type="js"]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);[/ch_pre]

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.

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.