Flip Inverted Hover Style - Navigation


Plugin Details

Add a rounded pill hover style to the header navigation links.

Compatibility

  • Works with Squarespace 7.1

  • Uses Custom CSS


Add To Custom CSS

// HEADER NAVIGATION - FLIP INVERT HOVER STYLE - GHOSTPLUGINS.COM //

.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 - GHOSTPLUGINS.COM //

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

Customizable Options

  • Flip Invert Rotation (On Hover)

  • Hover Transition Speed

Notes

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


Previous
Previous

Lunchbox Icon - Shopping Cart

Next
Next

Pill Hover Style - Navigation