Stretchy Navigation Line - Version 2
Description
Give navigation links a clean and simple line hover effect. 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.
// Stretchy Navigation Line - v2 // .header-nav-item::after { content: ''; background: #000000; //color height: 2px; //thickness width: 0; display: block; margin-top: 2px !important; transition: width 1s; //animation speed margin: 0 auto; } .header-nav-item:hover::after { width: 100%; } .header-nav-item--active a { background-image: none !important; }
Customize
Change color, thickness, and transition speed values to your liking.