Jump to content

Change the header background on blog posts only

Go to solution Solved by Web_Solutions,

Recommended Posts

Hi! I am using an adaptive header which I can make work on my regular pages but on my individual blog posts (when you click into them), I am not able to add a colored section above the post to change the background of the header. Is there some code that I could use to change the color of the header on only the blog post pages?

I would like the color to be: #506F53

Site https://mustard-seabass-es9w.squarespace.com/

PW: girard

TIA!!!!

Link to comment
  • Solution
13 hours ago, Celeste_Woodside said:

Hi! I am using an adaptive header which I can make work on my regular pages but on my individual blog posts (when you click into them), I am not able to add a colored section above the post to change the background of the header. Is there some code that I could use to change the color of the header on only the blog post pages?

I would like the color to be: #506F53

Site https://mustard-seabass-es9w.squarespace.com/

PW: girard

TIA!!!!

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

.collection-65a98643cc08f52bbfa21f35 header .header-announcement-bar-wrapper {
    background-color: #506F53 !important
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
42 minutes ago, Celeste_Woodside said:

This worked brilliantly @Web_Solutions! Thank you! 

Follow up question, would there be additional code to make the navigation links and button white?

Replace the previous code with the code below. 

.collection-65a98643cc08f52bbfa21f35 header .header-announcement-bar-wrapper {
    background-color: #506f53 !important;
    .header-nav-list a{
        color: #fff !important;
    }
    .header-actions-action a.btn {
        background: #fff !important;
        color: #000 !important;
    }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
20 minutes ago, Celeste_Woodside said:

Can I ask one more follow up question?  If I wanted to do this on another page how would I do it? I.e. the 'about' page? @Web_Solutions

Change the previous code with the code below. 

.collection-65a98643cc08f52bbfa21f35, .collection-65a9569875a7f7122d266533 {
  header .header-announcement-bar-wrapper {
    background-color: #506f53 !important;
    .header-nav-list a{
      color: #fff !important;
    }
    .header-actions-action a.btn {
      background: #fff !important;
      color: #000 !important;
    }
  }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.