Highlight on Hover Navigation
Learn how to highlight the navigation links on your Squarespace site on hover!
To try it out, just hover over one of the links at the top of this page!
Instructions
1. Copy and paste the following code to Custom CSS.
// Highlight on Hover - Navigation //
.header-nav-list:hover > .header-nav-item {
opacity: 0.45;
transition: .5s;
}
.header-nav-list:hover > .header-nav-item:hover {
opacity: 1.0;
transition: .5s;
}
// Highlight on Hover - Nav Folders //
.header-nav-folder-content:hover > .header-nav-folder-item {
opacity: 0.45;
transition: .5s;
}
.header-nav-folder-content:hover > .header-nav-folder-item:hover {
opacity: 1.0;
transition:1s;
}
2. Voila! You’re done!
Customizations
Adjust the speed of the transition by changing the number on the “transition” line.
Adjust the opacity of the links not being hovered over by adjusting Opacity levels between 0 and 1.
License
This plugin comes with an Unlimited Use License. View License Terms
Was this post helpful? Consider buying me a coffee to say thanks!