Navigation Link Hover Animation Change

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

Site Password: Twilight450

Hello!

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?

@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. 

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;
}

Can you share site access password.

Or try this

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.

On 3/18/2020 at 8:22 PM, tuanphan said:

Can you share site access password.

Or try this

 

My apologies! The site password is: Twilight 450 .

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. 

@DanielLucasDesigns That pw for the website is not working for me...

@DanielLucasDesigns can you share with me what worked because it seems now that what I had that was working is no longer working for me either. Thanks in advance

How about something a bit different. I was going to suggest a line under the active page link, but you are already doing that. The code I was going to share is this:

.main-nav ul li.active-link a,

.main-nav ul li.active-link

a:visited {
     border-bottom: 4px solid

#000000;
 }