In this tutorial, we’ll look into adding a cool “drawing” microinteraction to the Header Social Icons in Squarespace 7.1. There are a couple of elements that need to be in place in order to set this up, but there’s nothing too crazy. So if you’re up to spending a few minutes adding code to create this border hover mode, let’s not waste any more time and jump right into it!

Learn how to create a big-to-small shrinking logo effect in Squarespace 7.1 using only CSS. This tutorial walks through positioning, scaling, and triggering the animation on scroll using the built-in .shrink class

Struggling to keep your 7.1 navigation links in one single line? Not anymore! With this week’s CSS trick you’ll be able to fix that little issue in a hearbeat.

Looking to modify the spacing between social icons in Squarespace 7.1’s header? Then take a look at today’s CSS trick!

In today’s tutorial, we’ll be getting rid of the underline of active links in Squarespace 7.1, and setting our own styles with a little bit of CSS!

In today’s tutorial, we’ll be looking into how we can bring the button inside the mobile nav of Squarespace 7.1, closer to the links!

Want to add a free translation widget to your Squarespace site? Then take a look at how you can easily set that up and style it with this simple CSS trick.