Jump to content

Navigation Color Active and Hover and Slightly different.

Recommended Posts

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 comment
  • Replies 14
  • Views 1.2k
  • Created
  • Last Reply
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 comment
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 comment

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 comment
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 😁!

Link to comment
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 .

Link to comment

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

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.