Navigation Color Active and Hover and Slightly different.

Site URL: https://spinach-flower-hmcn.squarespace.com/

Hello,

I have a problem with my website. Currently I have the code set up for my navigation for "Hover state, and Active Hover"

So without hovering, the navigation links are grey.

When you hover them, the color is pink.

When you're on the page (Active) the color is green.

However, when you hover the same active navigation link, (Assuming it is still pink) the color is still pink but slightly off.

For example,

If you go to the website. 

1. Click on "One" (Hover shows Pink)

2. When you're on the "One" Page, and hover "One" again, the pink is off.

Here is the link,

https://spinach-flower-hmcn.squarespace.com/

the password is : 1

3 hours ago, 1215742 said:

Site URL: https://spinach-flower-hmcn.squarespace.com/

Hello,

I have a problem with my website. Currently I have the code set up for my navigation for "Hover state, and Active Hover"

So without hovering, the navigation links are grey.

When you hover them, the color is pink.

When you're on the page (Active) the color is green.

However, when you hover the same active navigation link, (Assuming it is still pink) the color is still pink but slightly off.

 

For example,

If you go to the website. 

1. Click on "One" (Hover shows Pink)

2. When you're on the "One" Page, and hover "One" again, the pink is off.

 

Here is the link,

https://spinach-flower-hmcn.squarespace.com/

the password is : 1

I am not finding any issues except that the pink is slightly a bit lighter when hovered over an active link, rather than when you hover over a non active link. Are you wanting the pink to be a bit darker like how it is while being hovered over on an un active link? I hope that this makes sense.

Yes! My problem is that the pink is slightly off. So yes, you're correct, I would like the pink to be a bit darker like how it is while being hovered over an un active link.

5 hours ago, 1215742 said:

Yes! My problem is that the pink is slightly off. So yes, you're correct, I would like the pink to be a bit darker like how it is while being hovered over an un active link.

May I see the code that you have on your site? I feel like there might be a little spot in the css that is making the color lighter. (You can paste the code here) 

Sorry for the delay! Here is the CSS code. 

/*Links Underline and HoverState Color*/
a {
background-image: none !important;
}

.header-nav-item a:hover {
      background-image: none !important;
      text-decoration: none !important;
    border-bottom: none !important;
}

/* Nav item color */
.header-nav-item a {
    color: hsl(50, 3%, 85%)!important;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: hsl(319, 100%, 73%)!important; 
}
/* Nav item active color */
.header-nav-item--active a {
    color: hsl(48, 19%, 35%)!important; 
}

/*Caption Spacing*/
figcaption.image-caption-wrapper {
    padding-top: 0 !important;
}
.image-caption p {
    margin-top: 8px;
    margin-bottom: 0;
}

p {
 font-size: 0.47rem;
}

8 hours ago, 1215742 said:

Sorry for the delay! Here is the CSS code. 

 

/*Links Underline and HoverState Color*/
a {
background-image: none !important;
}

.header-nav-item a:hover {
      background-image: none !important;
      text-decoration: none !important;
    border-bottom: none !important;
}

/* Nav item color */
.header-nav-item a {
    color: hsl(50, 3%, 85%)!important;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: hsl(319, 100%, 73%)!important; 
}
/* Nav item active color */
.header-nav-item--active a {
    color: hsl(48, 19%, 35%)!important; 
}

/*Caption Spacing*/
figcaption.image-caption-wrapper {
    padding-top: 0 !important;
}
.image-caption p {
    margin-top: 8px;
    margin-bottom: 0;
}

p {
 font-size: 0.47rem;
}

Hmm, I’m guessing but this might work well. Try changing “.header-nav-item--active a {
    color: hsl(48, 19%, 35%)!important; “
} to —->          .header-nav-item--active a {
    color: hsl(319, 100%, 73%)!important; 
} Let me know if this works 😁!

3 minutes ago, inunzi said:

Hmm, I’m guessing but this might work well. Try changing “.header-nav-item--active a {
    color: hsl(48, 19%, 35%)!important; “
} to —->          .header-nav-item--active a {
    color: hsl(319, 100%, 73%)!important; 
} Let me know if this works 😁!

I think I messed up, but we’ll see before I start creating assumptions .

Hello,

I tried it and it still has the same problem 😞

Here is the code with the change:

/*Links Underline and HoverState Color*/
a {
background-image: none !important;
}

.header-nav-item a:hover {
      background-image: none !important;
      text-decoration: none !important;
    border-bottom: none !important;
}

/* Nav item color */
.header-nav-item a {
    color: hsl(50, 3%, 85%)!important;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: hsl(319, 100%, 73%)!important; 
}
/* Nav item active color */
.header-nav-item--active a {
    color: hsl(319, 100%, 73%)!important; 
}

/*Caption Spacing*/
figcaption.image-caption-wrapper {
    padding-top: 0 !important;
}
.image-caption p {
    margin-top: 8px;
    margin-bottom: 0;
}

p {
 font-size: 0.47rem;
}

46 minutes ago, 1215742 said:

Hello,

I tried it and it still has the same problem 😞

Here is the code with the change:

 

 

/*Links Underline and HoverState Color*/
a {
background-image: none !important;
}

.header-nav-item a:hover {
      background-image: none !important;
      text-decoration: none !important;
    border-bottom: none !important;
}

/* Nav item color */
.header-nav-item a {
    color: hsl(50, 3%, 85%)!important;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: hsl(319, 100%, 73%)!important; 
}
/* Nav item active color */
.header-nav-item--active a {
    color: hsl(319, 100%, 73%)!important; 
}

/*Caption Spacing*/
figcaption.image-caption-wrapper {
    padding-top: 0 !important;
}
.image-caption p {
    margin-top: 8px;
    margin-bottom: 0;
}

p {
 font-size: 0.47rem;
}

Hmm so the colors are still slightly different? It must be the lighting effect on hover when the cursor hovers above the text. I’m not sure there’s a fix but we can see if anyone else knows a method. But I’ll still be here if there’s no reply. 

If you can find a solution that would be very helpful!

14 hours ago, 1215742 said:

If you can find a solution that would be very helpful!

Ah I see that this might be the fact that there’s a highlight effect for when you hover over an active link. I hope there’s a method to change this for you.

I hope so too!

2 hours ago, 1215742 said:

I hope so too!

I’m sorry that I couldn’t help you. I tried to find the code in the elements and I searched for answers on google but, sadly nothing came up with how to remove highlighted hover effects on active links😔

Add the following to Design > Custom CSS.

body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .header-nav-item--active a:hover {

  opacity: 1;
  
  }

Let us know how it goes.

@inunziIt's okay! I really appreciated your effort to help me!

@creedon It worked!! Thank you so much!!

Thank you all!