Jump to content

Changing the nav links hover colour only

Recommended Posts

I've added this code into the Custom CSS:

.sub-nav a:active, a:hover {
    outline: 0;
    color: #237CA8 !important;

Which has created the desirded effect (a hover state for my nav links) but it's also added the blue hue to all my button hover states. How can I get the Custom CSS to only target my menu nav? (See two images attached)

Thank you in advanced! 


Screenshot 2020-11-26 at 00.05.38.png

Screenshot 2020-11-26 at 00.05.44.png

Link to comment
  • Replies 4
  • Views 381
  • Created
  • Last Reply


In your code you have correctly targeted the sub nav links in their active state (.sub-nav a:active) but after that you are targeting all links in their hover state (a:hover) hence why the buttons are changing on hover as they are also considered links.

Try pasting this piece of code into your Custom CSS so that the sub-nav is targeted both times;

//Style active and hover sub nav links
.sub-nav a:active, .sub-nav a:hover {
    outline: 0;
    color: #237CA8 !important;


Link to comment


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.