How to create a scroll to stick header in Squarespace

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

This Squarespace tutorial will show you how to move your header to the bottom of the screen when your site loads.

As your website visitor scrolls down the page, your header will then stick to the top of the page, creating this scroll-to-stick effect.

The codes below do two things:

• The first one moves your header to the bottom of the screen and tells it to stick once it reaches the top.

• The second part of this code takes your first-page section, pulls it up to the top of the page, and gives it a little space at the bottom so the new location of your header doesn’t cover up content on your site.

Here are the codes from this tutorial:

You’ll want to edit the margin and height to fit the size of your own header content!

.header {
position: sticky!important;
top: 0px;
margin-top:85vh;
border-top: 1px solid #000
}

#page .page-section:nth-child(1){
margin-top: -110vh;
height: 100vh;
margin-bottom: 15vh }