If you have a circular logo then you might want to make it spin.

A rotating logo can look really effective on a Squarespace website and with just a few lines of custom code you can infinitely rotate your logo at whatever pace you want.

Watch the video

Check out the YouTube video below 👇

Head to Website > Website Tools > Custom CSS and add the following lines of code to your custom CSS box:

.header-title-logo{

animation: rotation 5s infinite linear;

}

@keyframes rotation {

from {

transform: rotate(0deg);

}

to {

transform: rotate(359deg);

}

}

What this code does is it tells Squarespace that you want your logo to rotate from 0 degrees (it’s standard position) all the way to 359 degrees, creating a full circle rotation. 

It also sets the speed to 5 seconds (you can edit this to make it slower or faster) and tells Squarespace that this is an infinite rotation aka it keeps going.

To make sure your code is targeting your logo you need to hit Shift + Command + C (on a Mac), hover over your logo on the page and find the target for the logo.

Copy and paste this target before your code brackets in your custom CSS box.

📩 Join the inner circle to get exclusive code updates

Once you’re happy with how your logo rotates, hit save and you’re good to go! A quick and easy Squarespace trick using some clever lines of custom code.

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?