Change underline colour in nav bar for active link

Hi there,

A client has asked for the active page underline in the nav bar to be coloured red (I'm using 7.1), but the text remain the same colour as the rest of the nav items. I have played around with CSS and thought I had figured it out, but when I went back into the site the next day the link was no longer red. Here is the code I tried:

.header-nav-item--active a {text-decoration: underline
    color: red !important;
}

I feel like the issue may be with how I'm specifying underline as I'm trying to piece together advice by Googling answers and am not super confident with CSS.

Any advice would be greatly appreciated.

Thanks, Tracy

1 hour ago, tracyhall said:

Hi there,

A client has asked for the active page underline in the nav bar to be coloured red (I'm using 7.1), but the text remain the same colour as the rest of the nav items. I have played around with CSS and thought I had figured it out, but when I went back into the site the next day the link was no longer red. Here is the code I tried:

 

.header-nav-item--active a {text-decoration: underline
    color: red !important;
}

 

I feel like the issue may be with how I'm specifying underline as I'm trying to piece together advice by Googling answers and am not super confident with CSS.

Any advice would be greatly appreciated.

Thanks, Tracy

What is your site url

@bangank36

Site is: https://redstormdesign.squarespace.com/

Password: thcrsd

Much appreciated 🙂

Thanks, Tracy

2 hours ago, tracyhall said:

Hi there,

A client has asked for the active page underline in the nav bar to be coloured red (I'm using 7.1), but the text remain the same colour as the rest of the nav items. I have played around with CSS and thought I had figured it out, but when I went back into the site the next day the link was no longer red. Here is the code I tried:

 

.header-nav-item--active a {text-decoration: underline
    color: red !important;
}

 

I feel like the issue may be with how I'm specifying underline as I'm trying to piece together advice by Googling answers and am not super confident with CSS.

Any advice would be greatly appreciated.

Thanks, Tracy

Get rid of color line if you want the link text black

.header-nav-item--active a  {
    text-decoration: underline;
    color: red !important;
    border-bottom: 1px solid red !important;
    background-image: none !important;
}

@bangank36 Thank you so much, I can confirm this has worked!

I really appreciate you sharing your time and expertise with me.

Big thanks 🙂

Cheers, Tracy

On 5/21/2021 at 8:25 PM, bangank36 said:

Get rid of color line if you want the link text black

.header-nav-item--active a  {
    text-decoration: underline;
    color: red !important;
    border-bottom: 1px solid red !important;
    background-image: none !important;
}

How do I make it so I can add a hex color code for the border-bottom?

Thanks,

16 hours ago, noodles22 said:

How do I make it so I can add a hex color code for the border-bottom?

 

Thanks,

change red to color code, eg: #f0f0f0