Upside Down Hover Style - Navigation
Plugin Details
Add an upside down hover style to the header navigation links.
Compatibility
Works with Squarespace 7.1
Uses Custom CSS
Add To Custom CSS
// HEADER NAVIGATION - UPSIDE DOWN HOVER STYLE - GHOSTPLUGINS.COM // .header-nav-item:hover a { -moz-transform: rotate(180deg) scaleX(-1); -webkit-transform: rotate(180deg) scaleX(-1); -o-transform: rotate(180deg) scaleX(-1); -ms-transform: rotate(180deg) scaleX(-1); transform: rotate(180deg) scaleX(-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
Upside Down Rotation (On Hover)
Hover Transition Speed
Notes
Link color, size, and font family can be changed in Squarespace settings like normal.