1215742 Posted October 21, 2020 Share Posted October 21, 2020 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
inunzi Posted October 22, 2020 Share Posted October 22, 2020 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
1215742 Posted October 22, 2020 Author Share Posted October 22, 2020 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 comment
inunzi Posted October 22, 2020 Share Posted October 22, 2020 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
1215742 Posted October 26, 2020 Author Share Posted October 26, 2020 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
inunzi Posted October 26, 2020 Share Posted October 26, 2020 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
inunzi Posted October 26, 2020 Share Posted October 26, 2020 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
1215742 Posted October 27, 2020 Author Share Posted October 27, 2020 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
inunzi Posted October 27, 2020 Share Posted October 27, 2020 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
1215742 Posted October 27, 2020 Author Share Posted October 27, 2020 If you can find a solution that would be very helpful! Link to comment
inunzi Posted October 28, 2020 Share Posted October 28, 2020 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. Link to comment
inunzi Posted October 28, 2020 Share Posted October 28, 2020 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 comment
creedon Posted October 28, 2020 Share Posted October 28, 2020 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
1215742 Posted November 2, 2020 Author Share Posted November 2, 2020 @inunziIt's okay! I really appreciated your effort to help me! @creedon It worked!! Thank you so much!! Thank you all! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.