Change header background color, specifically on blog posts

Hello. On my site, I have my header navigation background set to transparent on all of my pages, I have a blue background behind my headers so the navigation logo and nav items just overlay the blue background. For example, see here https://www.graphitefinancial.com/blog  or https://www.graphitefinancial.com/

However, for my blog posts I cannot add a blue background behind the header with the theme I'm using. See here: https://www.graphitefinancial.com/blog/title-growth-at-all-cost-strategies-arent-working-for-startups-heres-what-is-and-always-has.

So my logo doesn't show since it is white.

Is there a way for me to set just the blog posts to have a specific background. I DO NOT WANT TO CHANGE THE HEADER NAV BACKGROUND COLOR ON ANY OTHER PAGE BUT A BLOG POST.

Thanks :) 

Add to Home > Design > Custom CSS

.collection-type-blog.view-item header.Header.Header--bottom {
    background: blue;
}

Im having the exact same issue - and and the above solution from @tuanphan didn't work for me. 

Im also using version 7.1  if that helps. 

20 minutes ago, LuckyDave said:

Im having the exact same issue - and and the above solution from @tuanphan didn't work for me. 

Im also using version 7.1  if that helps. 

SS 7.1 blog use different class, not 

.collection-type-blog

Can you share link to blog post on your site?

On 12/19/2019 at 12:20 PM, tuanphan said:

SS 7.1 blog use different class, not 

.collection-type-blog

Can you share link to blog post on your site?

https://trovy.io/lists/the-greatest-villains-of-all-time

On 12/19/2019 at 6:58 PM, LuckyDave said:

Im having the exact same issue - and and the above solution from @tuanphan didn't work for me. 

Im also using version 7.1  if that helps. 

Use

.collection-type-blog-basic.view-item

11 hours ago, tuanphan said:

Use

.collection-type-blog-basic.view-item

 

.collection-type-blog-basic.view-item header.Header.Header--bottom {
    background: blue;
}

Is that correct? it doesn't seem to work for me. Sorry to bother you with this and thank you for your help

15 hours ago, LuckyDave said:

.collection-type-blog-basic.view-item header.Header.Header--bottom {
    background: blue;
}

Is that correct? it doesn't seem to work for me. Sorry to bother you with this and thank you for your help

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

35 minutes ago, tuanphan said:

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

 

Thanks @tuanphan but Its not working for me. Is there any settings i need to adjust perhaps?

15 minutes ago, LuckyDave said:

Thanks @tuanphan but Its not working for me. Is there any settings i need to adjust perhaps?

Actually - if i make the header solid as default - then perhaps i man then make transparent on certain pages?

Is there a way of targeting nav on home page and making it transparent?

13 minutes ago, LuckyDave said:

Thanks @tuanphan but Its not working for me. Is there any settings i need to adjust perhaps?

Try this

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

I'm trying to do the same thing on my main page for the header text over the banner. The above code didn't work. 

18 hours ago, sun_ said:

I'm trying to do the same thing on my main page for the header text over the banner. The above code didn't work. 

Create a question with link to your site.

On 12/31/2019 at 12:47 PM, tuanphan said:

Create a question with link to your site.

is used:
.header-menu-bg {
background-color: #01013a;
background: linear-gradient(to bottom, #01013a, #01013a);
}

On 12/19/2019 at 4:20 AM, tuanphan said:

SS 7.1 blog use different class, not 

.collection-type-blog

Can you share link to blog post on your site?

Perfect! Just ran into this issue. Thank you.

I have this same desire as @GrahamGraphite. 
We are on 7.1 and all of the above suggested codes don't work.

I added a section on the blog main page 
https://teal-aqua-rfm9.squarespace.com/blog 
which allows me to set the preferred color palate for the transparent header.

Unfortunately, on an individual blog post page, we are not able to affect the header background color to match the main blog page without changing the entire blogpost color palate.
https://teal-aqua-rfm9.squarespace.com/blog/daniela-beltran-mexico-film-producer
Our nav "disappears" as does part of our logo.

I'd like to be able to make the individual blogpost headers match the Dark 2 color palate which we are using on the blog landing page.

On 10/15/2021 at 6:48 AM, stephan said:

I have this same desire as @GrahamGraphite. 
We are on 7.1 and all of the above suggested codes don't work.

I added a section on the blog main page 
https://teal-aqua-rfm9.squarespace.com/blog 
which allows me to set the preferred color palate for the transparent header.

Unfortunately, on an individual blog post page, we are not able to affect the header background color to match the main blog page without changing the entire blogpost color palate.
https://teal-aqua-rfm9.squarespace.com/blog/daniela-beltran-mexico-film-producer
Our nav "disappears" as does part of our logo.

I'd like to be able to make the individual blogpost headers match the Dark 2 color palate which we are using on the blog landing page.

Same color for all individual posts or different?

Does anyone have an update on how to do this? Got the exact same question.

I am looking to change the colour of the header, site title and navigation on all blog posts.

Thanks,
Jon

On 2/3/2022 at 12:16 AM, JonnyIlsley said:

Does anyone have an update on how to do this? Got the exact same question.

 

I am looking to change the colour of the header, site title and navigation on all blog posts.

 

Thanks,
Jon

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

Think i managed to solve this. 

Thanks 

I'm having this same question. 

I want the header of the individual blog posts to be a non-white color. Here's a blog post: https://www.toplawcoach.com/advice/top-law-coach-school-profile-georgetown-law-school

I'm using 7.1

On 2/15/2022 at 2:10 AM, Gabius said:

I'm having this same question. 

I want the header of the individual blog posts to be a non-white color. Here's a blog post: https://www.toplawcoach.com/advice/top-law-coach-school-profile-georgetown-law-school

I'm using 7.1

Add to Design > Custom CSS

body[class*="collection-type-blog"].view-item header#header {
    background-color: #f1f !important;
}

Hello, thanks for posting this information below. It's not working for me on Version 7.0– Brine family (The Maple Inn template). Do you know if there's anything else I can try, please?

Issue: I have a white logo which is not appearing on a white background. I'd like to change the logo to another one or use a plain black background.

Many thanks in advance.🙏

3 hours ago, DotcomMarket said:

Hello, thanks for posting this information below. It's not working for me on Version 7.0– Brine family (The Maple Inn template). Do you know if there's anything else I can try, please?

Issue: I have a white logo which is not appearing on a white background. I'd like to change the logo to another one or use a plain black background.

Many thanks in advance.🙏

Can you share link to page where you have problem?

On 2/19/2022 at 2:46 AM, tuanphan said:

Add to Design > Custom CSS

body[class*="collection-type-blog"].view-item header#header {
    background-color: #f1f !important;
}

 

Omg THANK YOU! I've been trying to figure out how to fix this issue for months.