Rotating Logo - Site Header


Plugin Details

Create a forever rotating header logo on both desktop and mobile.

Compatibility

  • Works with Squarespace 7.1

  • Uses Custom CSS


Add to Custom CSS

// Rotating Header Logo - GhostPlugins.com //

@rotating-header-logo: 10s;
@rotating-mobile-logo: 15s;

/* --- Do Not Edit Below ---- */

.header-title-logo img { animation: circle @rotating-header-logo infinite linear; } @media screen and (max-width: 767px) { .header-title-logo img, .header .header-title--use-mobile-logo .header-mobile-logo img { animation: circle @rotating-mobile-logo infinite linear; } } @-webkit-keyframes circle { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }

// Rotating Header Logo - GhostPlugins.com //

Customizable Options

  • Rotating Speed (Desktop)

  • Rotating Speed (Mobile)

Notes

A logo with a 1:1 ratio (square) is recommended

Applies to a logo image that has been uploaded - not header text

If you wish to disable on either desktop or mobile, set time to 0s.


Previous
Previous

Tilt Hover - Image Block

Next
Next

Logo and Navigation Divider Line