How do I shrink the logo when scrolling on Squarespace?

When you enable a fixed/sticky header in Squarespace 7.1 and the user scrolls, the header gets a .header--menu-open or shrink-related class. You can target the scrolled state to reduce the logo size.

Squarespace 7.1 adds the class .shrink to the header element when scrolled. Use this to animate the logo container down to a smaller size with a smooth CSS transition.

.header .header-title-logo img {
  max-height: 80px;
  transition: max-height 0.3s ease;
}
.header.shrink .header-title-logo img {
  max-height: 45px;
}
.header {
  transition: padding 0.3s ease;
}
.header.shrink {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}