Jump to content

Customize Navigation Bar Underlines?

Recommended Posts

Site URL: https://www.weacceptcryptocurrency.com/

I added the following code to my site to add a hovering underline effect to the navigation bar:

.header-nav-item a:hover {
    text-decoration: underline;

The problem is that once you actually click on a navigation link, the underline goes way lower vertically than the hover effect. This causes two separate underlines when you scroll over the same page that you're on. It's a minor issue but looks bad.

Is there a way to make all of the nav bar underlines stay at the same vertical position as the hover effect? I want the underlines to be right under the words, so that once a page is clicked there is no double underline upon hovering.

Link to comment
  • Replies 2
  • Views 4k
  • 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.