Fixed Header with Shrinking Logo on Scroll | Squarespace 7.0

What does this code do?

This code snippet will allow you to have a fixed header in Squarespace 7.0. When a user scrolls down the header and logo shrink in size. This is a good option for those whose logo take up a large portion of the screen.

Note: This code is written for the Brine Family Templates but can be altered to be used on others.

Video Tutorial

Code Snippets

Javascript

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!--  Fixed Header with Scroll  -->
<script>
window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.querySelector(".Header").style.height = "100px"; // height of the navigation after scroll
    document.querySelector(".Header-branding-logo").style.height = "50px"; // height of the logo after scroll
  } else {
   document.querySelector(".Header").style.height = "150px"; // height of the navigation before scroll
   document.querySelector(".Header-branding-logo").style.height = "100px"; // height of the logo before scroll
  }
}
</script>

Then customize the height of the navigation and logo before and after scrolling.

CSS

Copy and paste this code into Design > Custom CSS

/* Fixed Header with Scroll */
.Content-outer {
  margin-top: 150px;
  /*moves the top of the page down*/
}

.Header{
  position: fixed;
  z-index: 9999;
  width: 100vw !important;
  top: 0px;
  left: 0px;
  background: white; /* background color of the navigation */
  transition: 0.2s;
}
.Header-inner {
  height: 100%;
}

.Header-branding img {
  transition: 0.2s;
  width: auto;
}

Then customize the spacing, colours, and transition speed.

Bonus: If you have an announcement bar…

If you have an announcement bar, you will need to move the header down below the announcement bar. Then it will need to be moved back up on scroll. To do this, use the following code instead.

Javascript

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!--  Fixed Header with Scroll  -->
<script>
window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.querySelector(".Header").style.height = "100px"; // height of the navigation after scroll
    document.querySelector(".Header").style.top = "0px"; // position of the navigation after scroll
    document.querySelector(".Header-branding-logo").style.height = "50px"; // height of the logo after scroll
  } else {
   document.querySelector(".Header").style.height = "150px"; // height of the navigation before scroll
    document.querySelector(".Header").style.top = "40px"; // position of the navigation before scroll
   document.querySelector(".Header-branding-logo").style.height = "100px"; // height of the logo before scroll
  }
}
</script>

Then customize the height of the navigation, the position of the navigation, and logo before and after scrolling.

CSS

Copy and paste this code into Design > Custom CSS

/* Fixed Header with Scroll */
.Content-outer {
  margin-top: 150px;
  /*moves the top of the page down*/
}

.Header{
  position: fixed;
  z-index: 9999;
  width: 100vw !important;
  top: 40px;
  left: 0px;
  background: white; /* background color of the navigation */
  transition: 0.2s;
}
.Header-inner {
  height: 100%;
}

.Header-branding img {
  transition: 0.2s;
  width: auto;
}

Then customize the spacing, colours, and transition speed.

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the sizes, spacing, colours, and transition speed.

3. If you have an announcement bar, be sure to use the code provided so that the announcement bar doesn’t overlap the navigation.