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

Navigation Link Hover Animation Change

Question

Posted (edited)

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

Share this post


Link to post

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

Share this post


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.

Share this post


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. 

Share this post


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

Share this post


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