Spotlight Navigation Hover Style

---

Description

Inspired by the spotlight navigation style in Brine, add a spotlight hover style to 7.1 navigation. 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.

// Spotlight Navigation Style //

.header-nav-list:hover > .header-nav-item {
  opacity: 0.5;
}

.header-nav-list:hover > .header-nav-item:hover {
  opacity: 1.0;
}

// Spotlight Navigation Folder Style //

.header-nav-folder-content:hover > .header-nav-folder-item {
  opacity: 0.5;
}

.header-nav-folder-content:hover > .header-nav-folder-item:hover {
  opacity: 1.0;
}

---

Customize

This code targets main navigation and folder links. You do not need to change any values but you can adjust the opacity if you’d like.

---