Jump to content

Change header background color and font color for Events / Blog

Recommended Posts

Site URL: https://elizahopekenyon.squarespace.com/events/solstice-breathwork-ceremony

Hi Guys, I really need help with background header colours / header font colours on Events and Blog pages. 

I'm on 7.1 and I want a transparent white logo / white navigation on most of my pages (home / about / service etc-) because I'm using dark blue header images on those pages. So I have set the header to 'Transparent.' 

However on the events and blog pages, I want a white background so the text is easier to read (due to long paragraphs of text). However, once I choose the colour "White Bold" for the blog or event pages ... my white logo 'disappears' and the navigation turns grey. 

So I would really love to find a way to set my header bar on these pages to this colour #173D5C (so my white logo shows up and I would love the font navigation / social media links to also be white). Does anyone know how to do this? Please help! 

This is the header I have on the events page.png

This is the header  I want on the events page.png

Screen Shot 2020-06-11 at 22.28.37.png

Link to comment
  • Replies 4
  • Views 1.7k
  • Created
  • Last Reply

Add to Home > Design > Custom CSS

.collection-type-events-stacked.view-item header#header {
    background: #173D5C !important;
.collection-type-events-stacked.view-item header#header * {
    color: white;
    fill: white;


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

Thanks so much Tuan! It looks so much better already!  Just two more questions (hope that's ok!) ... 

1) I noticed when I scroll, the header colour block stays there but the  links and logo all go. (See attached scerenshot). It would be great if the navigation bar could go when people scroll down and pop back up when they scroll up (sorry I don't know what it's called). 

2) And would it be possible for you to give me the code for the News / Blog page as well? I want to do the same thing ..





Screen Shot 2020-06-12 at 00.06.43.png

Screen Shot 2020-06-12 at 00.06.30.png

Screen Shot 2020-06-12 at 00.00.16.png

Link to comment


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.