Change Site Header on Blog Post Page only

Hello! I am wondering how to change the background colour of the site header just for blog posts only? The rest of my website is a dark theme, but I have a white background for blog posts which makes the logo in the site header disappear. I have tried using a few variations of 
 

.collection-type-blog-basic.view-item header#header {
    background: black;
}

and

.collection-type-blog-basic-grid.view-item .header-announcement-bar-wrapper {
    background: black !important;
}

but nothing seems to be working.

Thanks so much for your guidance!

Can you share link to blog? to check code.

Has this issue been resolved? I also have white header font, and on the blog page my white text disappears. I can't edit the header without changing it across the entire site, and I can't add a background image to the blog post. Or can I?

here is a link to a blog page.

https://www.parkbrewing.company/blog-our-journey/no-great-story-ever-started-with-someone-eating-a-salad

password is "password"

6 hours ago, Park_Brewing_Company said:

Has this issue been resolved? I also have white header font, and on the blog page my white text disappears. I can't edit the header without changing it across the entire site, and I can't add a background image to the blog post. Or can I?

here is a link to a blog page.

https://www.parkbrewing.company/blog-our-journey/no-great-story-ever-started-with-someone-eating-a-salad

password is "password"

I see header image here. Do you still need help on this?

No I don't need help on this. I used some code to add banner image to blog posts. But for other pages, "product pages" I still have this issue. 

My navigation menu is set to transparent, and on pages where you can't change the background or banner behind a nav menu, its usually white. My font now seems to be defaulting to black on these pages. Perhaps SS has updated this issue? 

How can I change the nav background, on all my product pages, here is one bellow.

https://parkbrewing.squarespace.com/config/pages/5fa1adaf8071535fad46d66f/categories/5fa1adaf8071535fad46d673

PW: "password"

8 hours ago, Park_Brewing_Company said:

No I don't need help on this. I used some code to add banner image to blog posts. But for other pages, "product pages" I still have this issue. 

My navigation menu is set to transparent, and on pages where you can't change the background or banner behind a nav menu, its usually white. My font now seems to be defaulting to black on these pages. Perhaps SS has updated this issue? 

How can I change the nav background, on all my product pages, here is one bellow.

https://parkbrewing.squarespace.com/config/pages/5fa1adaf8071535fad46d66f/categories/5fa1adaf8071535fad46d673

 

PW: "password"

Can you share link to exact page? /config is admin url :(

Yes sorry about that URL. I have solved the issue with these css codes. I was able to target the products page items, and adjusted the announcement bar as well.  Will post this here in case anyone else can use. 

.collection-type-products.view-item .sqs-announcement-bar-content {
  background: #fff;
}
.collection-type-products.view-item .sqs-announcement-bar-text * {
  color: #000 !important;
}
.collection-type-products.view-item .header .header-announcement-bar-wrapper {
  background: hsl(184, 55%, 44%);
}
.collection-type-products.view-item .white-bold .header-title-text a#site-title {
  color: #fff;
}
.collection-type-products.view-item .header-nav-item--collection > a {
  color: #fff !important;
}
.collection-type-products.view-item .white-bold .header-actions .icon--stroke svg,
.collection-type-products.view-item .white-bold .header-actions .icon--stroke .icon-cart-quantity {
  stroke: #fff !important;
  color: #fff !important;
}
.collection-type-products.view-item .white-bold .burger-inner .top-bun, .collection-type-products.view-item .white-bold .burger-inner .patty, .collection-type-products.view-item .white-bold .burger-inner .bottom-bun {
  background-color: #fff !important;
}

Are you able to share the code that you used to get your invisible logo to black on the blog posts only! I'm having this issue - thank you! 

On 11/7/2021 at 11:28 AM, NikkiBee said:

Are you able to share the code that you used to get your invisible logo to black on the blog posts only! I'm having this issue - thank you! 

Can you share link to a blog post? We can help easier

I am also having this issue too, where the header settings change on the blog post page to white (as opposed to matching the heading settings set globally which in this case is a navy overlay with all logo and nav links in white. Hence they disappear with this issue.  

https://www.sorayaking.com/blog

Does anyone know the code to correct this? I tried to work it out myself based on my fairly limited coding knowledge but am at a loss. It should match the below example as that is what is set globally...

6 hours ago, sorayakdesign said:

I am also having this issue too, where the header settings change on the blog post page to white (as opposed to matching the heading settings set globally which in this case is a navy overlay with all logo and nav links in white. Hence they disappear with this issue.  

https://www.sorayaking.com/blog

Does anyone know the code to correct this? I tried to work it out myself based on my fairly limited coding knowledge but am at a loss. It should match the below example as that is what is set globally...

Add to Design > Custom CSS

body[class*="type-blog"] header#header {   
    background-image: url(https://images.squarespace-cdn.com/content/v1/622e4298c39bdb2867366699/465af72d-afec-4f28-b192-8b58e4db142c/one-of-the-sculptures-called-rising-venus-at-kangaroo-point-brisbane-qld_t20_k6rxlR.jpg?format=2500w);;
}

thank you! it has certainly helped and kept the image at the top but it doesn't display the blue overlay that I have set to the site header anywhere else? looks like below. Is it easier just to photoshop a new image to match and replace than try to code around the issue?

13 hours ago, sorayakdesign said:

thank you! it has certainly helped and kept the image at the top but it doesn't display the blue overlay that I have set to the site header anywhere else? looks like below. Is it easier just to photoshop a new image to match and replace than try to code around the issue?

You can create an image with photoshop. It will be easier than using code