sticky header style issue

Hello,

Regarding setting different Headers for different Pages, please check out the following Theme documentation guide: https://xtemos.com/docs-topic/how-to-set-different-header-for-specific-page/

Regarding knowing about the Global Header settings related to Sticky Header too, please check out the following Theme guide: https://xtemos.com/docs-topic/global-header-settings/

Further, you can try the following Custom CSS on your Site for the Homepage Header color concern:

This CSS is for without Header Sticky:

body:not(.single-product) .whb-overcontent:not(.whb-sticked) .whb-row:not(.whb-with-bg) {
    background-color: transparent !important;
}

This CSS is for Header Sticky:

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

Location to paste Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> paste the CSS.

Hope this helps !

Best Regards

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

Hello,

So, the difference between your Homepage Header and other pages Header is that the Homepage Header is an overlap one in which the background is transparent without Sticky and a certain background color appears for the sticky header whereas, on other pages it is a simple Header without overlap which is why with and without Sticky, the Header is appearing as white.

So, under the Dashboard > WoodMart > Header Builder > Header Base Overlap Dark is the layout which is being used on Homepage and the Header Minimalism is the layout which is being used generally on all other pages.

So, if you want to quick action change in this regard like the other pages Header, then you can simply edit your Homepage with simple edit without page builder > there under the page options > you can select the Header Minimalism there: https://snipboard.io/xJqpXB.jpg

Then you can have the same Header for all pages. This would be result after selecting: https://snipboard.io/WUTBin.jpg

So, doing this you would not need any further Custom CSS to use and is the best possible way right now.

For the time being, we have done this change on your Site. You can revert back to the previous one if you want following the above told way.

Hope this helps !

Best Regards

Hello,

You can try the following CSS to make the Sticky Header background on the Homepage:

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

But the Menu Items are already in white on your Site and they have general classes i.e. same ones so it would be difficult to target their color change under the Sticky Header on Homepage.

Location to paste Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> paste the CSS.

Best Regards

Hello,

Sorry to say but right now there isn’t a generalized solution available for this because as we mentioned the classes for the Menus are the same for Headers. So, the best possible solution here in this regard is to have that sort of color for the Menu Items on the Homepage Header that would look good with and without Sticky under the white and transparent background both.

Hope you can understand !

Best Regards