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

Edited by ElizaHK
Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.