Header Navigation - Flip Invert Hover Style

---

1. Plugin Info

Add an inverted (flipped) hover style to the header navigation links.

• Works with Squarespace 7.1

• Uses Custom CSS

---

2. Add this code to Custom CSS

// HEADER NAVIGATION - FLIP INVERT HOVER STYLE - GHOST //

.header-nav-item:hover a {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
  transition: .2s ease all !important;
}

.header-nav-item a {
  transition: .2s ease all !important;
}

// EXCLUDE FOLDER LINKS FROM HOVER //

.header-nav .header-nav-item--folder .header-nav-folder-content a {
    transform: rotate(0deg) !important;
}

// HEADER NAVIGATION - FLIP INVERT HOVER STYLE - GHOST //

---

3. Customizable Options

• Flip Invert Rotation (On Hover)

• Hover Transition Speed

Link color, font size, and family can be changed in Squarespace settings.

---

4. Plugin Notes

• No plugin notes

---