Jump to content

Change underline colour in nav bar for active link

Recommended Posts

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
  • Replies 6
  • Views 4.5k
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...
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

Archived

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.