Change colour of blog post header

Im using a logo with white text on my site and on all the pages except a blog post page i can see it as i have an image behind it. https://trovy.io

On blog posts the colour theme is white so its not visible.  https://trovy.io/lists/top-10-binge-worthy-boxsets

Is there any way to add some custom css to just change the colour of the nav to dark navy on the blog posts page?

Thanks

I see you fixed?

Hi, I have the same problem. Could you help me to fix it? I have a white logo and on blog posts it's invisible:(

Just now, KaterinaF said:

Hi, I have the same problem. Could you help me to fix it? I have a white logo and on blog posts it's invisible:(

If you share link to blog post, I can take a look

Sure, https://www.vertex-russia.com/blog/our-studio

Thank you!!

1 minute ago, KaterinaF said:

Sure, https://www.vertex-russia.com/blog/our-studio

Thank you!!

Add to Home > Design > Custom CSS

.collection-type-blog.view-item .Header-branding-logo {
    filter: invert(1);
}

Thank you so much, it worked!!

Hi @tuanphan

I have a similar issue. I need the headers of my individual blogs to be black as my logo is white, but I also want the titles mentioned below the logo in the header to be seen.  

I used the following code you had given on this blog and it worked but my titles below the logo are missing.

body:not(.homepage) .header-announcement-bar-wrapper.black, body:not(.homepage) header#header {
    background-color: black !important;}

Can you please help me out such that the header background is black but the page titles below the logo in the header are also visible?

Here is my blog page: https://lily-hexaflexagon-ppt7.squarespace.com/blog/lithium-ion-batteries-are-here-to-stay-heres-why

Here is the link to the website: https://lily-hexaflexagon-ppt7.squarespace.com/poweredby

On 5/16/2021 at 2:10 PM, vmist said:

Hi @tuanphan

I have a similar issue. I need the headers of my individual blogs to be black as my logo is white, but I also want the titles mentioned below the logo in the header to be seen.  

I used the following code you had given on this blog and it worked but my titles below the logo are missing.

body:not(.homepage) .header-announcement-bar-wrapper.black, body:not(.homepage) header#header {
    background-color: black !important;}

Can you please help me out such that the header background is black but the page titles below the logo in the header are also visible?

Here is my blog page: https://lily-hexaflexagon-ppt7.squarespace.com/blog/lithium-ion-batteries-are-here-to-stay-heres-why

Here is the link to the website: https://lily-hexaflexagon-ppt7.squarespace.com/poweredby

Hi. It looks like you solved this?

On 5/20/2021 at 3:17 PM, tuanphan said:

Hi. It looks like you solved this? 

No. I've not been able to resolve it yet. The title sections below the logo are still not visible. Any way I can fix that? 

15 hours ago, vmist said:

No. I've not been able to resolve it yet. The title sections below the logo are still not visible. Any way I can fix that? 

Add to Design > Custom CSS

/* blog nav color */
body.collection-type-blog-basic-grid.view-item .header-nav-list * {
    color: white !important;
}

Would you be able to help my make my header visible on each blog post in black?

Adjusting the above code to the correct color only make my "home" and "about" links become visible. I'd like for my title, the "home and "about" buttons and my social to all be visible atop each blog post.

Website: www.MeatballAmericano.com

THank you! 

On 8/5/2022 at 2:28 AM, meatballamericano said:

Would you be able to help my make my header visible on each blog post in black?

Adjusting the above code to the correct color only make my "home" and "about" links become visible. I'd like for my title, the "home and "about" buttons and my social to all be visible atop each blog post.

Website: www.MeatballAmericano.com

 

THank you! 

Add to Design > Custom CSS

/* Blog Post Header */
body[class*="type-blog"].view-item a#site-title {
    color: black;
}
body[class*="type-blog"].view-item div.header-nav-item a {
    color: black !important;
}
body[class*="type-blog"].view-item header#header svg {
    fill: black;
}

Wonderful.  That worked.  Thank you!

Can we do the same thing for the "about" section as well. Really, I want the title to stick with every page on the site, if possible. 

Thanks! 

On 8/19/2022 at 12:31 AM, meatballamericano said:

Wonderful.  That worked.  Thank you!

Can we do the same thing for the "about" section as well. Really, I want the title to stick with every page on the site, if possible. 

 

Thanks! 

Edit About Page > Add a Code Block under Image or Text > Paste this code

<style>
  a#site-title {
    color: black;
}
div.header-nav-item a {
    color: black !important;
}
header#header svg {
    fill: black;
}
</style>

I am having a similar issue for my blog pages, my header has a black gradient throughout the website which looks great with a photo but on the blog pages you cannot add a section of photo above so I am left with an ugly black gradient on a white page. Anybody know a custom code to make the header solid white for blog pages only? os I am open to other solutions. I do not want to make the blog pages black, if like to leave them while. 

This is the website URL right now: https://friendsofthechildrenofvnzla.squarespace.com/

Thank you in advance!

11 hours ago, Creatingspaces said:

I am having a similar issue for my blog pages, my header has a black gradient throughout the website which looks great with a photo but on the blog pages you cannot add a section of photo above so I am left with an ugly black gradient on a white page. Anybody know a custom code to make the header solid white for blog pages only? os I am open to other solutions. I do not want to make the blog pages black, if like to leave them while. 

This is the website URL right now: https://friendsofthechildrenofvnzla.squarespace.com/

Thank you in advance!

Can you share link to blog page? You mean blog list page or individual posts?

That didn't seem to work. Error message: Syntax Error on line 5

Here is my complete code through CSS:

a#site-title:after {
    content: "LIVE THE SWEET LIFE WHEREVER YOU ARE";
    display: block;
  position: relative;
  top: 10px;
  margin-top:-12px;
  margin-bottom:-30px;
    height: 00x;
    font-size:13px;
  font-size:"poppins";
    color: #FFEAE5;
    font-family: headline1;}

.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: poppins;
font-weight: 600;
font-size: 33px !important;
color: #black;
text-transform: bold;
font-style: regular
} }

h1.entry-title {
    font-family: 'poppins' !important;
  }
#page .content-wrapper {
    padding-top: -20px !important;
    padding-bottom: -0px !important;
    padding-left: 15px !important;
    padding-right: 5px !important;
}
body.homepage .summary-title a, .blog-item-title h1 {
    font-weight: bold !important;
    font-family: poppins !important;}
.blog-masonry {
  padding-bottom: 1px
}
.blog-masonry {
  padding-bottom: 1px
}
/* Blog Post Header */
body[class*="type-blog"].view-item a#site-title {
    color: black;
}
body[class*="type-blog"].view-item div.header-nav-item a {
    color: black !important;
}
body[class*="type-blog"].view-item header#header svg {
    fill: black;
}

<style>
  a#site-title {
    color: black;
}
div.header-nav-item a {
    color: black !important;
}
header#header svg {
    fill: black;
}
</style>

On 8/26/2022 at 12:20 AM, meatballamericano said:

That didn't seem to work. Error message: Syntax Error on line 5

 

Here is my complete code through CSS:

 

a#site-title:after {
    content: "LIVE THE SWEET LIFE WHEREVER YOU ARE";
    display: block;
  position: relative;
  top: 10px;
  margin-top:-12px;
  margin-bottom:-30px;
    height: 00x;
    font-size:13px;
  font-size:"poppins";
    color: #FFEAE5;
    font-family: headline1;}

.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: poppins;
font-weight: 600;
font-size: 33px !important;
color: #black;
text-transform: bold;
font-style: regular
} }

h1.entry-title {
    font-family: 'poppins' !important;
  }
#page .content-wrapper {
    padding-top: -20px !important;
    padding-bottom: -0px !important;
    padding-left: 15px !important;
    padding-right: 5px !important;
}
body.homepage .summary-title a, .blog-item-title h1 {
    font-weight: bold !important;
    font-family: poppins !important;}
.blog-masonry {
  padding-bottom: 1px
}
.blog-masonry {
  padding-bottom: 1px
}
/* Blog Post Header */
body[class*="type-blog"].view-item a#site-title {
    color: black;
}
body[class*="type-blog"].view-item div.header-nav-item a {
    color: black !important;
}
body[class*="type-blog"].view-item header#header svg {
    fill: black;
}

<style>
  a#site-title {
    color: black;
}
div.header-nav-item a {
    color: black !important;
}
header#header svg {
    fill: black;
}
</style>

Please read the comment again.

Winner winner, chicken dinner. Thank you!!!1