Jump to content

How to remove underline over active link in nav

Recommended Posts

My site: beardodesigns.squarespace.com

password: 1234

I am stuck figuring out how to remove the underline on the active page on my navigation.  I would think it would be something simple but I am having a hard time wrapping my head around it and no matter what I try and Google I can seem to find a solution.  Here is a snippet of the CSS from my navigation.  As you can see I have my bottom border on my active, yet I want to hide that when you hover.

As you can see if you hover over the active page you still get a bottom border that transitions in.

I am still fairly new with CSS and still learning, anything would be greatly appreciated!

// Nav bar //
.header-nav-item::after {
  content: '';
  background: #FFCC66; //color
  height: 1px; //thickness
  width: 0;
  display: block;
  transition: width 2s ease; //animation speed
  margin: 0 auto;

.header-nav-item:hover::after {
  width: 100%;

.header-nav-item--active a {
  background-image: none !important;


Link to comment
  • Replies 2
  • Views 556
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

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

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