Code to change header colour doesn’t work

Hi team, I am using your pre-built template “Demo Fashion Colored”. The overlap header that comes with this template has a certain colour on specific pages, such as the single product page: https://woodmart.xtemos.com/shop/other/fashion-colored/sweater-wide-sleeve/demo/fashion-colored/. The same colour also comes on scroll. I am trying to change this color using a code previously provided by your team on a different occasion, code below:

.whb-color-light:not(.whb-with-bg) {
background-color: #000;
}

However, it sometimes works, sometimes just goes back to the pre-set dark grey colour! Please see the video attached, it happens randomly on refreshing the page/ visiting another page. A link to my site is attached in the private content area.

Thank you in advance for looking into it!

Attaching the link to the video:

Hello,

Add the following Custom CSS to Theme Settings > Custom CSS > Global Custom CSS. You can adjust the color code to match your preferences. This will change the sticky header’s background color when the page is scrolled.

.whb-sticky-shadow.whb-sticked .whb-row:last-child {
    background-color: #000!important;
}

To change the normal background color, navigate to WoodMart > Header builder > edit default header (highlighted star icon) or you can go through the admin bar directly https://prnt.sc/Ct9ehRDvvDV9

Configure the header row settings and in the style tab, change the row background color: https://ibb.co/7NXZN22x

Best Regards,

Hey again, thanks for your reply. I am afraid this is not really solving the issue because the way this template is built, it uses a transparent header. Somehow in this template you have made the default header, which has no background colour, actually have a colour on certain pages such as the single product page. If I set a colour as per your instructions above, the header will have a colour everywhere. Do you have any insights please? A kind reminder: I am using your pre-built template “Demo Fashion Colored”. The overlap header that comes with this template has a certain colour on specific pages, such as the single product page: https://woodmart.xtemos.com/shop/other/fashion-colored/sweater-wide-sleeve/demo/fashion-colored/.

Hello,

You are using different custom headers for different pages.

The Woodmart theme provides the option to create and assign separate headers per page, and it looks like:

• On the Home page, you are using a header with an overlap.
• On the Product pages, you are using a different header that has a background color.

That’s why the behavior is different between pages — it’s not controlled globally through one header but by assigning different custom headers.

To edit the background color of the header that appears on the product page, you need to go to:
WoodMart > Header Builder > Edit the custom header assigned to Product Pages

(You can also check the page-specific header settings from the page options.)

Here is a guide that explains it in detail:
https://xtemos.com/docs-topic/how-to-set-different-header-for-specific-page/
https://xtemos.com/docs-topic/options-for-pages/

This way, you can configure each header separately without affecting your home page header.
To apply a colored background only on specific pages while on scrolling (like single product pages), use this custom css in Theme settings.

body.single-product .whb-sticky-shadow.whb-sticked .whb-row:last-child {
    background-color: #3F51B5!important;
}

Best Regards,

[Author]

Posts