Change header background color, specifically on blog posts

And if you want an image instead of a color, you can use this:

body[class*="collection-type-blog"].view-item header#header {
    background-image:url(url-goes-here);
}

And if you want to add an image, but have an overlay color over it with some opacity, then try this out:

body[class*="collection-type-blog"].view-item header#header {
    background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(your-image-url-here); 
}

I had the same issue and the code shared worked for me.  Thank you! I changed the blog header to a dark color so that my white logo shows up.

However, now I can't see my nav items because they are in a dark color also. Does anyone know how to change the color of the nav items just on blog pages to show up on a darker color? 

I'm using Squarespace 7.0 Marta Template. 

On 3/15/2023 at 4:46 AM, StoneSoupFarm said:

I had the same issue and the code shared worked for me.  Thank you! I changed the blog header to a dark color so that my white logo shows up.

However, now I can't see my nav items because they are in a dark color also. Does anyone know how to change the color of the nav items just on blog pages to show up on a darker color? 

I'm using Squarespace 7.0 Marta Template. 

Hi,

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

I'm having the same issue with my site.

I changed the blog header to black so that the logo shows up (using the code provided, thank you) .... and now I can't see the nav items because they are black. How do I change the nav text links to white on just the blog post page?

I'm using Squarespace 7.1

On 3/24/2023 at 8:33 PM, cinstudio said:

I'm having the same issue with my site.

I changed the blog header to black so that the logo shows up (using the code provided, thank you) .... and now I can't see the nav items because they are black. How do I change the nav text links to white on just the blog post page?

I'm using Squarespace 7.1

Individual Posts or Blog List Page?

Instead of setting a background color, is it possible to set a color theme? I can change the background color with the code above, but the drop down menu is still not right. 

On 4/13/2023 at 9:49 AM, RikkiG said:

Instead of setting a background color, is it possible to set a color theme? I can change the background color with the code above, but the drop down menu is still not right. 

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

On 4/16/2023 at 4:50 AM, tuanphan said:

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

I'm not the original commenter but I'm looking for the same solution. Thanks in advance for your help!

On all pages except the blog, my site header is transparent on initial page load and then has a black background once you begin scrolling. On the blog, the header shows a white background when you scroll down, which causes all menu items in white text to be unreadable. It also causes my drop down menu text to be black when it should be white.

Link to sample blog post on website here: https://wolf.studio/case-studies/best-headshot-for-linkedin-tips-2023

Link to homepage showing how the header should behave: https://wolf.studio/

How can I force the site header on the blog to be the same as the rest of the website? Can I force it to use a specific color theme? It is using "Lightest 1" but should be "Darkest 1"

Will a solution for the above also change the drop down menu text for "Photography" in my header to be white? It is currently unreadable against the semitransparent drop down background. 

Thanks!

On 4/19/2023 at 9:06 AM, ducksflytogether said:

I'm not the original commenter but I'm looking for the same solution. Thanks in advance for your help!

On all pages except the blog, my site header is transparent on initial page load and then has a black background once you begin scrolling. On the blog, the header shows a white background when you scroll down, which causes all menu items in white text to be unreadable. It also causes my drop down menu text to be black when it should be white.

Link to sample blog post on website here: https://wolf.studio/case-studies/best-headshot-for-linkedin-tips-2023

Link to homepage showing how the header should behave: https://wolf.studio/

How can I force the site header on the blog to be the same as the rest of the website? Can I force it to use a specific color theme? It is using "Lightest 1" but should be "Darkest 1"

Will a solution for the above also change the drop down menu text for "Photography" in my header to be white? It is currently unreadable against the semitransparent drop down background. 

Thanks!

Add to Design > Custom CSS

body[class*="type-blog"].view-item header#header.shrink div.header-nav-item>a {
    color: black !important;
}

Hello, hope you can help me.

What would be the code for changing the header background color in all blog post pages with a dynamic header? 

www.murustudios.squarespace.com
pw: 1111

Many thanks for your help!

On 5/23/2023 at 10:14 PM, mikelmuruzabal said:

Hello, hope you can help me.

What would be the code for changing the header background color in all blog post pages with a dynamic header? 

www.murustudios.squarespace.com
pw: 1111

Many thanks for your help!

 

I don't see blog page on your site. Can you share link?

Sure, this is the address: https://murustudios.squarespace.com/work
pw 1111

I have code for changing the header background color one page by one page, but I was wondering if there's an option to change the header background color of all blog post pages at the same time, but not from the main blog page ("work").

Many thanks for your help!

On 6/1/2023 at 12:52 AM, mikelmuruzabal said:

Sure, this is the address: https://murustudios.squarespace.com/work
pw 1111

I have code for changing the header background color one page by one page, but I was wondering if there's an option to change the header background color of all blog post pages at the same time, but not from the main blog page ("work").

Many thanks for your help!

Add to Page Header, note: .view-list for list page, .view-item for individual pages

<style>
  body.view-item header#header {
    background-color: orange !important;
}
</style>

If you use Personal Plan, let me know, we will give another code

Thanks Tuan, much appreciated. That code worked well but I wanted to maintain the dynamic header, so I finally used this code (in the header code injection area of the main Blog page):

<style>
  body.view-item [data-header-style="dynamic"].header.shrink{
  background: #003CD3;
}
</style>

This is working fine, but if you see something wrong please let me know.
Thx!

On 12/15/2019 at 11:11 AM, tuanphan said:

Add to Home > Design > Custom CSS

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

 

amazing it worked for me but I have same problem with my check out page. do you please have the code for this?

On 7/14/2023 at 4:23 AM, javierospina said:

amazing it worked for me but I have same problem with my check out page. do you please have the code for this?

Use this code

body#cart, body#Cart {
header.Header.Header--bottom {
    background: blue;
}}

my problem was solved on that particular page but now I have problem with this page

but now i have the same problem with this page https://www.javierospina.com/store/ibiza-es-vedr-gsxye

On 7/18/2023 at 1:19 AM, javierospina said:

my problem was solved on that particular page but now I have problem with this page

 

but now i have the same problem with this page https://www.javierospina.com/store/ibiza-es-vedr-gsxye

 

 

Add to Design > Custom CSS

/* Products header */
body[class*="type-products"].view-item header.Header {
    background-color: #f1f !important;
}

On 2/19/2022 at 5:46 PM, tuanphan said:

Add to Design > Custom CSS

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

 

Tuanphan, this worked well for me! but would it also be possible to change the font color of the header navigation, just on the blog post page as well? 

On 9/6/2023 at 2:03 PM, NDucrETH said:

Tuanphan, this worked well for me! but would it also be possible to change the font color of the header navigation, just on the blog post page as well? 

Use this

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

15 hours ago, tuanphan said:

Use this

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

 

This approach is proving to be a little complicated, so going to move in a different direction. Thank you for the assistance nonetheless!