Customize Navigation Bar Underlines?

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.

Add to Custom CSS

.header-nav-item--active a {
    background: none !important;
    text-decoration: underline !important;
}

Worked perfectly. Thank you so much Tuan.