Css for different header

Hi my website has two headers, and I want a gradient in one of them, how can I edit this?
I tried wih this code but nothing changes:

.wd-page-wrapper .whb-header_834472 {
background-color: transparent !important;
background-image: linear-gradient(90deg, #3369A4 30%, #3297AA 100%) !important;}

Hello,

Can you please share the page URL where you want to change the background color to a gradient, so I can check and give you a possible custom css code.

Best Regards,

Yes, is a test domain:

https://miquelp27.sg-host.com/professionals-medics/dr-jose-luis-molinero-polo/

I want the blue bar with gradient like footer.

Hello,

Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

.postid-29341 .whb-general-header {
    background-image: linear-gradient(90deg, #3369A4 30%, #3297AA 100%) !important;
}

Best Regards,

The problem is that I need this header in all single products and another pages…

Hello,

To customize the header background on specific pages using CSS, use the following examples:

For the single product page:

.single-product .whb-general-header {
    background-image: linear-gradient(90deg, #3369A4 30%, #3297AA 100%) !important;
}

For the blog page:

.blog .whb-general-header {
    background-image: linear-gradient(90deg, #3369A4 30%, #3297AA 100%) !important;
}

If you want to target a specific page, use the unique page ID in the body class. For example, for a page with ID 123, use:

.page-id-123 .whb-general-header {
    background-image: linear-gradient(90deg, #3369A4 30%, #3297AA 100%) !important;
}

Best Regards,

[Author]

Posts