Rotating Logo - Site Header

Navigation BarHover Effects
Written By giannis katsaprakakis

Compatibility

  • Works with Squarespace 7.1

  • Uses Custom CSS

Description

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

Add to custom css

// Rotating Header Logo - BYKATSS.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 - BYKATSS.COM //

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.

Customizable Options

  • Rotating Speed (Desktop)

  • Rotating Speed (Mobile)

giannis katsaprakakis https://www.bykatss.com/
Previous

Slashy Navigation - Site Header
Next

Slide Arrow Button - Button Block