Jump to content

Hide header colour block upon scroll on blog only

Recommended Posts

Site URL: https://elizahopekenyon.squarespace.com/blog/song-blessings-chant

Hi Guys, 

I used this code to force my blog header to be coloured so that my white logo would show up. However ... now I have a different issue ...

#header {background-color: #173C50 !important;}
#header a {color: #fff !important;}
<style>.icon--fill svg{fill:#fff!important}</style>

When I scroll down the page the coloured header block stays at the top (without navigation links / social media icons). This looks weird! Help! 

My ideal scenario is to a) Have the header colour block disappear completely upon scroll (note: on blog only not site wide) ... 


b) If the colour block needs to stay there, at least have the white logo, navigation, social media icons appear in white.

Password for the page is: turbo123

Please help! Thanks so much in advance! 


Screen Shot 2020-07-17 at 17.54.52.png

Link to comment
  • Replies 0
  • Views 207
  • Created
  • Last Reply


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.