Jump to content

Navigation Link Hover Animation Change

Recommended Posts

Site URL: https://groundhog-decagon-w8be.squarespace.com/

Site Password: Twilight450



I'm trying to change the way the animation works on the navigation links on my clients website.

The default way it works with SquareSpace is, you click on the link and it takes you to a page, and when you hover over the link you're currently using (page you're on) it changes shade (lightens up, typically), whereas the other pages don't and are the same when hovered over.

I want to make this the opposite, where all links react when you hover, except for the active link. Is there any way to do this using CSS?

Link to comment
  • Replies 9
  • Views 3.1k
  • Created
  • Last Reply
On 3/18/2020 at 7:28 PM, Justin414 said:

@DanielLucasDesigns Do you have the password for this website? I would love to help you with your issue. It is fairly simple to change the hover colors. I want to make sure I am targeting the correct links. 

Sorry Justin, I didn't get any notifications for responses here. The site password is: Twilight450 . I essentially want to flip the way the effect is now. Instead of working on active links, I want it to work on inactive links. For example, if I'm on the homepage, the link hover effect only works on the Home link, not the others. I hope that makes sense.

Link to comment
On 3/18/2020 at 7:57 PM, Justin414 said:

This should work for you. If not please let me know. Change out the color to what ever you need it to be. 


.tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper.black .header-nav-wrapper a:hover {
    color: lightpink;

Unfortunately when I applied the code to the CSS panel, nothing changed. 

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.