Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change underline colour in nav bar for active link


tracyhall

Question

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

image.png

Link to comment

6 answers to this question

Recommended Posts

  • 0
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

image.png

What is your site url

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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

image.png

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;
}

image.thumb.png.d4dada202caef7a37b6a2d87b683fd4d.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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;
}

image.thumb.png.d4dada202caef7a37b6a2d87b683fd4d.png

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

 

Thanks,

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...