Invert Header On Hover (7.1 Version)

---

Description

Invert the header – plus links, buttons, etc when being hovered. This plugin uses css editor and works with Squarespace 7.1.

---

How To Install

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

// Invert Header On Hover //

.header .header-announcement-bar-wrapper {
  transition: filter .5s ease-in-out;
  -webkit-filter:invert(0%) !important;
  filter:invert(0%) !important;
}

.header .header-announcement-bar-wrapper:hover {
  transition: filter .5s ease-in-out;
  -webkit-filter:invert(100%) !important;
  filter:invert(100%) !important;
}

---

Customize

You can adjust the transition .5 seconds to make the fade slower or quick on hover.

This plugin is recommended for headers that use a black, white, and grey color palette. Other colors used in the header will invert.

---