Change product page header colour

Add to Home > Design > Custom CSS

/* product page header color */
.collection-type-products.view-item header#header {
    background: red;
}

On 8/31/2020 at 5:57 PM, tuanphan said:

Add to Home > Design > Custom CSS

/* product page header color */
.collection-type-products.view-item header#header {
    background: red;
}

 

Thank you so much!

On 8/31/2020 at 5:57 PM, tuanphan said:

Add to Home > Design > Custom CSS

/* product page header color */
.collection-type-products.view-item header#header {
    background: red;
}

 

Hi again, somehow it doesn't work any more and the page is back to a white header. 😞

Having exactly the same problem.  on other pages the header is changed by adding another block directly underneath. ive added image headers this way on all my other pages.

but when i go to a product item page, its white! no way to add image or colour. so frustrating. any help?

On 1/11/2021 at 9:59 PM, Owenistheking said:

Having exactly the same problem.  on other pages the header is changed by adding another block directly underneath. ive added image headers this way on all my other pages.

but when i go to a product item page, its white! no way to add image or colour. so frustrating. any help?

Can you share site url? We can check easier

https://www.paintedlegions.co.uk/store/p/7-dice-poly-set-marble-yellow

product pages all with blank white headers. logo isnt visible as thats white too!

https://www.paintedlegions.co.uk/

this is the eader on all my other pages. 

On 1/14/2021 at 6:23 PM, Owenistheking said:

https://www.paintedlegions.co.uk/store/p/7-dice-poly-set-marble-yellow

product pages all with blank white headers. logo isnt visible as thats white too!

 

https://www.paintedlegions.co.uk/

this is the eader on all my other pages. 

I see logo fine here. Do you still need help?

I'm having the same problem too. I'm wondering if the code provided was for 7.0. I'm working in 7.1.

Here's the overview page: https://studio411salon.com/haircare and here's it product item page. https://studio411salon.com/haircare/p/alchemic-shampoo-chocolate. The only thing you can see is the drop shadow I had to add to make the type more readable. 

I would like to add a color to the background since the type and logo are white. 

Just found this and it worked!

body.collection-type-products .header .header-announcement-bar-wrapper {
    background: red;

ARGH!!! Me again. That code also added a colored background to the top of my main page. The main product page should have an image all the way to the top. 

On 1/20/2021 at 6:21 AM, nwhittlesey said:

ARGH!!! Me again. That code also added a colored background to the top of my main page. The main product page should have an image all the way to the top. 

use this class

body.collection-type-products.view-item .header .header-announcement-bar-wrapper

14 hours ago, tuanphan said:

use this class

body.collection-type-products.view-item .header .header-announcement-bar-wrapper

Thank you so much!! This did the trick.