Sticky Header Background Colour

Hello,

We are trying to have our header as transparent but when scrolled it becomes black. Currently it is an ‘off black’ colour when scrolling. Please see the video in the private area.

How do we changed the sticky header background colour to black rather than the off black colour but have it transparent when not scrolled?

Kind Regards

LP

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .whb-sticked .whb-general-header {
background-color: black; 
}

Best Regards.

Hi.

yes I tried that and I also tried adding code for the the second header line but whilst it worked for this header it changes the background of all our headers use on the website.

body .whb-sticked .whb-general-header {
background-color: black;
}

body .whb-sticked .whb-column {
background-color: black;
}

Is there anyway to change these without but only for this header type and not the other header type used on our website?

Hello,

Go to WoodMart > Header Builder > Edit Current Header > Configure the Top Header, Main Header, Header Bottom. And change the background color of each row in the style tab.

Best Regards.

Hello,

When we change the background of each row it does indeed add a background colour but when not sticky we want the header to be transparent (as shown in the video). When a row background colour background is added we don’t get the transparent effect when there is no sticky header scroll.

Hello,

Try to use page id and change the sticky header background color for a specific page.
Add below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS

.page-id-6592 .whb-sticked .whb-header-bottom-inner {
	background-color: black !important;
}

Best Regards.

[Author]

Posts