Create a Squarespace Social Media Icon Sidebar

Jul 19

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

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 a special one for all you 7.1 fans out there!

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
}