Shrink the header logo on scroll in Squarespace 7.1

This is one of my favourite squarespace CSS codes! Shrinking the logo and navigation bar on scroll. This is a very useful and eye catching feature for your website. Especially if you have a large shaped logo. This helps keep things neat and tidy!

Add the below code to your custom css. Go to > Design > Custom CSS and paste the code. Don’t forget to hit save!

---

//Shrink Your Header
#header .header-title-logo img {
  transition: max-height 140ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 40px;
  }
}

---

If you want to get extra sassy you can also change the logo completely on scroll. This is very useful for logos that are quite long in length, this way you can add a more condensed version of your logo or an icon on scroll.

Copy the below css code and paste into your custom css.

Replace the YOUR LOGO LINK HERE text to the url of your logo by uploading your file to the manage custom files box on the custom css editor section. Once uploaded simply click the file and place inside the below code brackets.

//Change Logo On Scroll
#header .header-title-logo img {
  transition: max-height 140ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
 .header-title-logo a {
   max-height: 30px;
    content: url('YOUR LOGO LINK HERE');
  }
}

---

Did I help you? Consider buying me a coffee as thanks!