Tutorial: Change the Opacity of Navigation Links on Hover

Pin this post to Pinterest! ☝🏻

CHANGE NAVIGATION LINKS ON HOVER

Out-of-the-box Squarespace website designs are fantastic - they're quick, functional, and get the job done. But sometimes, adding a touch of custom flair can take your site from basic to breathtaking. One easy and effective way to do this is by enhancing your top navigation menu with a sleek hover effect.

Squarespace's default action when you hover over a link is to do....well, nothing. As you can see here, nothing happens when your cursor hovers over the link -

BEFORE:

So, let's change that up, shall we?

Now, when you hover over a navigation link, all of the other links gray out, putting the focus on the one you’re pointing at. This simple tweak not only looks classy but also subtly guides your visitors' attention, making their browsing experience smoother and more intuitive.

AFTER:

This is a super easy effect to implement. No need to be a coding whiz - just copy, paste, and you're good to go.

HOW TO CREATE an opacity HOVER EFFECT:

Here's the code we're going to use. Just copy this -

//change opacity in header nav on hover//
.header-nav a {
transition: opacity .4s ease;
opacity: 1 !important;
}
.header-nav:hover a {
opacity: .35 !important;
}
.header-nav a:hover {
 opacity: 1 !important;
}

Then go to Website -> Website Tools -> Custom CSS and paste the code there.

And that's it! Now you can sit back and watch the magic happen.

When a visitor hovers over a link, the other links will gracefully fade to gray, keeping the hovered link in sharp focus. This simple yet effective technique adds a level of sophistication to your site that standard templates can't compete with.

So, go ahead and give it a try. Your visitors will appreciate the polished look, and you'll love how simple it was to achieve.

Happy coding!

Want more CSS? Check out this free guide below 👇

---