How to add Floating Social Media Icons to Squarespace Fluid Engine
Having a strong presence on social media is crucial for branding and marketing your business or personal brand. Adding floating social icons that are always visible on your website is an easy way to encourage visitors to follow you on your chosen platforms and stay up to date with your content. Not only do these icons provide an easy way for visitors to connect with you, but they also contribute to the professional and cohesive look of your site. The new Fluid Engine update to Squarespace means the codes we used on 7.1 to achieve this effect are no longer viable and they need some tweaking.
By the end of this tutorial, you'll have a stylish and functional addition to your website that will make it easy for your visitors to connect with you on social media and stay updated on your brand. Let's get started!
Step 1: Add a social links block to your footer
Add a social links block to your footer then click on the design tab within the block and set the icon alignment to left and select either the knockout or solid style.
Setting the icon style to knockout or solid ensures that your icons will be visible regardless of the background color of the section they overlap.
Step 2: Add the CSS
Paste the following code to your CSS panel (Website > Website Tools > Custom CSS):
/* Floating Social Icons*/
#page {z-index:0;}
footer {
overflow: unset;
z-index: 10;
}
footer .sqs-svg-icon--wrapper {
display: block !important;
}
footer .socialaccountlinks-v2-block {
pointer-events: none; /*this ensures the icons don't overlap elements within the section*/
position: fixed !important;
top: 40% !important; /* Change this number to adjust the distance of the icons from the top */
left: 10px!important;
z-index: 2000000;
}
footer .socialaccountlinks-v2-block .sqs-svg-icon--list {
pointer-events: none;
display: flex;
flex-direction: column;
}
footer .socialaccountlinks-v2-block a {
margin: 0 0 20px !important; /*Change this number to adjust the spacing of the social icons*/
display: inline-block;
pointer-events: auto;
}
The final form!
Voilà! Just like that, your social icons will float to the side of your website. This code is fully responsive and works perfectly on mobile devices. While this is the final form of the code, let's look at some extra customization options in case they are needed.
Extra Customizations
-
@media only screen and (max-width: 640px) {footer{ .sqs-svg-icon--wrapper{display:none!important;}}}
-
The method described above will display social media icons on the side of your website by taking them from the footer and adding them to the side. This means that you cannot include a standalone social media icon block in the footer. If you want to have both floating icons on the side of your website and a social media icon block, you can use the code provided below. Make sure to replace "BLOCK-ID" with the actual ID of your social media icon block.
#page {z-index:0;}footer {
overflow: unset;
z-index: 10; }
footer{
#block-63a38ad032e22e58cc16054a
.sqs-svg-icon--wrapper{
display: block !important;
}
.socialaccountlinks-v2-block#block-63a38ad032e22e58cc16054a{
pointer-events: none; /*this ensures the icons don't overlap elements within the section*/
position: fixed !important;
top: 50% !important; /* Change this number to adjust the distance of the icons from the top */
left: 10px!important;
z-index: 2000000;
.sqs-svg-icon--list {
pointer-events: none;
display: flex;
flex-direction: column;
}
a {
margin: 0 0 25px !important; /*Change this number to adjust the spacing of the social icons*/
display: inline-block;
pointer-events: auto;
}
}
}
/*<— OPTIONAL: HIDE SOCIAL ICONS ON MOBILE —>*/
@media only screen and (max-width: 640px) {#block-63a38ad032e22e58cc16054a {display:none!important;}}
-
.sqs-use--icon {fill:#000!important; }
-
.sqs-use--mask {fill:#fff!important;}
That’s all folks! If you're looking to customize your Squarespace website even more, check out the code shop for unique modifications that are sure to set you apart from your competition!
