How to create a social sidebar in Squarespace 7.1 // Squarespace Social Media Icon Sidebar Tutorial

With a little clever CSS, you can keep your social media links visible on the side of your Squarespace site no matter how much content there is to scroll through!

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

This is a special one for all you 7.1 fans out there! We’re going to use some clever CSS to create a social media sidebar.

We’ll move the social media links from the header of your site and pull them over to the side of the page. With the position property, we can make them stick there, keeping your social links visible on every page no matter how much content there is to scroll through!

Here is the code from this tutorial; get creative with the colors and size values until it looks perfect for your own site!

.header-actions-action–social {
flex-direction: column;
position:fixed;
left:-1vw; top:50vh;
background:#ddd;
padding:1vw;
border:1px solid #000;
box-shadow:5px 5px 15px
}

.header-actions–right .header-actions-action–social .icon:first-child{
margin-left:1.25vw
}

– – –
🔗 RELATED VIDEOS 🔗
How to change the color of social link icons in Squarespace 7.1 – including hover effects!

New Designs for Squarespace Headers

– – –
💸 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 ♥

You May Also Like