Sometimes you’ll have important information and links inside the footer of a website, and making that visible all the time can be really important!
This tutorial will teach you how to use CSS to make sure the footer of your site is always visible.
—
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
—
In this tutorial, we are working with a site that has THREE different sections in the footer! You can use the first code below to make the whole thing visible – always – or use one of the other codes to isolate just the last section, first section, or a specific one you have in mind.
Be sure to install this in your custom CSS because the footer is visible on every page in your Squarespace site! You can add this code to your CSS file by clicking on design and then custom CSS. If you already have code there, don’t worry! Enter a new line and add this code under it.
Here are the different codes from this tutorial:
Make the entire footer always visible:
#footer-sections {
position: fixed!important;
width: 100%!important;
bottom: 0!important;
z-index: 99!important
}
Make the last section of the footer always visible:
#footer-sections .page-section:last-of-type {
position: fixed!important;
width: 100%!important;
bottom: 0!important;
z-index: 99!important
}
Make the first section of the footer always visible:
#footer-sections .page-section:last-of-type {
position: fixed!important;
width: 100%!important;
bottom: 0!important;
z-index: 99!important
}
Make the second section of the footer always visible:
#footer-sections .page-section:nth-child(2) {
position: fixed!important;
width: 100%!important;
bottom: 0!important;
z-index: 99!important
}
Want to add a border? Include this code before the final bracket:
border-top: 1px solid #000
Want to add a box shadow? Add this code before the final bracket:
box-shadow: 0 -5px 15px #333
– – –
🔗 RELATED VIDEOS 🔗
Title: Youtube URL
Title: Youtube URL
Title: Youtube URL
– – –
💸 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. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
