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.