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.
—
Learn more about custom code for Squarespace in my free class at https://insidethesquare.co/learn
—
This Squarespace tutorial is specific for version 7.1 and won’t work for older versions of Squarespace. Older versions are no longer getting new features like Fluid engine so I strongly recommend moving your site to the latest version! Learn more here: https://insidethesquare.co/fluid
—
The codes below do two things. The first one moves you header to the bottom of the screen, and then tells it to stick once it reaches the top.
The second part of this code takes your first page section and pulls it up to the top of the page, and gives a little space at the bottom so the new location of your header doesnt cover up content on you 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
}
—
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
– – –
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
—
The term “Squarespace” is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.
