Rotating Header Logo

Site Header
Written By The Ghost Co.
Learn more
Learn more

1. Plugin Info

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

  • Works with Squarespace 7.1

  • Uses Custom CSS

2. Add this code to Custom CSS

// Rotating Header Logo - Ghost //

@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 - Ghost //

3. Customizable Options

  • Rotating Speed (Desktop)

  • Rotating Speed (Mobile)

4. Plugin Notes

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

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

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

The Ghost Co. http://www.ghostplugins.com
Previous

Slashy Navigation
Next

Logo and Navigation Divider Line