sticky header style issue

Hello, I have a settings problem with the sticky header. I would like it to be a white background version, which I managed to do on all my pages except the homepage. It also happens to be a different header between the home page and the other pages of the site, however I need the sticky header to have the same style. Can you help me ? THANKS

I send you the screenshots that were too heavy on the previous shipment

Attachments:

You must be logged in to view attached files.

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, thank you for these solutions but it doesn’t help 🙂
I can’t change sticky header on my home page. The css code does not work, it makes the website down for the style

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

Hi, ok thank you for your help 🙂

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, thank you for your answer and solutions, but 🙂 actually I want to keep the transparent header on my home page and have the same sticky header than the other pages (white background and not the dark one). How can I do that ?

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

that’s right, I can’t read the logo neither the menu, it’s white on white. There is any solution to have the same sticky style than the regular header for the transparent header ?

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

[Author]

Posts