Announcement Bar Hover Color

• Look Demo
• How To Install
• Customize
• License

Change the color of the announcement bar when hovered over. This plugin uses css editor and works with all template families.

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

Copy Code

// 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;
} 

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

This plugin comes with an Unlimited Use License. View License Terms