Change product page header colour

Site URL: https://www.holmcollection.com

Hi, please help me. My product page
header color doesn't fit well with the white background but I want to keep the color for the other pages. How can I change just the product page header color?

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.

it seems like you found an answer, that's great! it doesn't seem to work for me. could you just run through how to apply this in case I'm getting something wrong. thanks!

I can get the background to change to black....  i can change the text to White.... 

BUT

the dropdown navigation menus are still white, so the text (white on white) is still invisible.  

How do we change the dropdown menue colour also?

body.collection-type-products.view-item .header .header-announcement-bar-wrapper {
    background: black;
}

On 3/20/2021 at 3:47 PM, Owenistheking said:

 

it seems like you found an answer, that's great! it doesn't seem to work for me. could you just run through how to apply this in case I'm getting something wrong. thanks!

 

 

Can you share link to your site? We can help easier

On 3/22/2021 at 5:18 AM, tuanphan said:

Can you share link to your site? We can help easier

https://calliope-tulip-rjr7.squarespace.com/config/

Hi! I have the same problem now, black on black. Could you help me please?

On 5/3/2022 at 5:00 PM, Venera said:

https://calliope-tulip-rjr7.squarespace.com/config/

Hi! I have the same problem now, black on black. Could you help me please?

Your site is private. Can you setup password & check url?

17 hours ago, tuanphan said:

Your site is private. Can you setup password & check url?

I copied the site because the trial period ends there

https://reed-glockenspiel-rhkr.squarespace.com/
Password - support

🙂

On 5/6/2022 at 2:01 PM, Venera said:

I copied the site because the trial period ends there

https://reed-glockenspiel-rhkr.squarespace.com/
Password - support

🙂

Add to Design > Custom CSS

body.collection-type-products.view-item .header-announcement-bar-wrapper {
    background-color: white !important;
}

4 hours ago, tuanphan said:

Add to Design > Custom CSS

body.collection-type-products.view-item .header-announcement-bar-wrapper {
    background-color: white !important;
}

 

Thank you very much!
This works when the background is white and the menu and logo are black. But I need a black background and white text. When I change the color to black, the whole font turns black.

how to make the font white?

19 hours ago, Venera said:

Thank you very much!
This works when the background is white and the menu and logo are black. But I need a black background and white text. When I change the color to black, the whole font turns black.

how to make the font white?

use this

body.collection-type-products.view-item .header-announcement-bar-wrapper * {
    color: white !important;
}

On 5/9/2022 at 10:53 AM, tuanphan said:

use this

body.collection-type-products.view-item .header-announcement-bar-wrapper * {
    color: white !important;
}

 

Thank you so much! It works perfectly!

Thank you so much for the product page fix! I realized the same thing is happening if the 'shopping cart' is empty. I tested it out by removing an item from the cart and got this page. EDIT: I'm on v7.1

Can you help with the proper code to make the header have a background color so the white logo/navigation can be seen? Thank you! 

On 9/12/2022 at 10:12 PM, mjrodriguez said:

Thank you so much for the product page fix! I realized the same thing is happening if the 'shopping cart' is empty. I tested it out by removing an item from the cart and got this page. EDIT: I'm on v7.1

 

Can you help with the proper code to make the header have a background color so the white logo/navigation can be seen? Thank you! 

Try this CSS. If it doesn't work, please share link to your site

body#cart header#header {
	background-color: blue !important;
}