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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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.