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

Navigation Color Active and Hover and Slightly different.


1215742

Question

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

Link to post
  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@inunziIt's okay! I really appreciated your effort to help me! @creedon It worked!! Thank you so much!! Thank you all!  

I hope so too!

14 answers to this question

Recommended Posts

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

Link to post
  • 0

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.

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

Link to post
  • 0

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

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

Edited by inunzi
Link to post
  • 0
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 .

Edited by inunzi
Link to post
  • 0

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

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

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

Edited by inunzi
Link to post
  • 0
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😔

Link to post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

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