Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Navigation Link Hover Animation Change


Question

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?

Edited by DanielLucasDesigns
Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@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

9 answers to this question

Recommended Posts

  • 0

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

Link to post
  • 0
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 post
  • 0
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 post
  • 0

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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...