How to remove underline over active link in nav

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

Let me know if this does it:

.header-nav-item--active:hover {
   a,span {
      background-image:none !important;
      text-decoration:none !important;
   }
}

This code should work for Active Item

.header-nav-item--active a, .header-menu-nav-item--active .header-menu-nav-item-content {
    background-image: none !important;
}