Jump to content

How to change hover underline color in Header without changing the actual text above it?

Recommended Posts

I am trying to make my navigation pages to underline on hover; however, I do not want it to change the color of the words above the underline like this. I want it to look like this:1715555374_ScreenShot2020-04-03at3_30_01PM.png.ee4519a0ee6a2c9e4977dd64b78fdf97.png

But, currently, it looks like this:113636378_ScreenShot2020-04-03at3_30_54PM.png.bbf5d1fb5c062273b4b879f9a61e283e.png

when using the code:

#header a:active{
 text-decoration: underline !important;

#header a:hover{color: red!important;
 text-decoration: underline ! important;

 text-decoration: underline ! important;

Any suggestions? I am using 7.1.

Link to comment
  • Replies 1
  • Views 1.8k
  • Created
  • Last Reply


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.