Jump to content

Add a header background color on post-level blog pages

Recommended Posts

Site URL: https://sphere-carillon-blb6.squarespace.com/

Hello,

I've searched the forums and experimented with suggestions I've found, but I can't seem to get this to work.

Part of my logo and all of my header navigation is white, which works great until I get to individual blog pages.

Example: Home 
https://sphere-carillon-blb6.squarespace.com/

When I get to an individual blog post, the logo disappears and I have to change the color of the nav to black.
https://sphere-carillon-blb6.squarespace.com/cohere/2020/04/29/a-human-centered-approach-to-digital-leadership-with-lauren-vargas-phd

Question: Is there a simple way to change the background on the header ONLY on the blog page template page to black?

Any help would be much appreciated!

Link to comment
  • Replies 4
  • Views 579
  • Created
  • Last Reply

@tuanphan Worked perfectly! I appreciate that very much.

For various reasons I wound up just dropping the fixed position nav. The effect was nice but it just became problematic. 

The blog-level page header is working perfectly and now I just need to do some cleanup on font weights / colors.

Thanks again!

Screen Shot 2020-05-10 at 7.23.50 AM.png

Link to comment
  • 10 months later...
On 3/15/2021 at 11:56 PM, bwillse said:

@tuanphan I tried the code above along with code from your other posts regarding getting a background color on the header in an individual blog post.

Site: https://www.magisadvisorygroup.com/

Individual Post: https://www.magisadvisorygroup.com/news-blog-1/magis-advisory-group-hires-dan-finlin-as-senior-consultant

 

 

Hi. Add to Design > Custom CSS

/* blog post header */
body.collection-type-blog.view-item header.Header {
    background: black;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.