How to shrink header logo on scroll - Squarespace 7.1

Do you have a website that has a detailed logo that it needs to be seen, but you don’t want it that large all the time? Some website have a sticky header which means the logo can be seen all the time.

You can make the logo smaller when the user scrolls, by adding this custom code to your Squarespace website.

---

Add this to your Custom CSS

Change the size of how large / small the logo gets by adjusting the “max-weight: 80px” value.

//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: 80px; //Change this based on size
  }
}