Announcement Bar Hover Color

Install Steps

Announcement Bar Hover Color

Submitted by sssupers Works with all template families

Ghost_Black-1.gif

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Announcement Bar Hover Color //

.sqs-announcement-bar { 
  width: 100%;
  background-color: #242424 !important; /* main color */
  webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.sqs-announcement-bar:hover {
  border-color: white !important;
  background-color: #E63B5A !important; /* hover color */
  webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
} 

Step Three

Replace both of the color values #242424 and #E63B5A with the colors of your choice.

Save and refresh the page. 👍

Moov Labs