Remove Underline from Active Link in Navigation

Site URL: https://delanydesigns.com

Password: 123456

I’m trying to remove the underline from the active page link in the navigation. This is what I’ve put in my custom CSS:

.header-nav-item--active a {
  color: #941215 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

For some reason, the underline is still showing up. Can anyone help me with this?

@tuanphan That worked perfectly! Thanks. Can you also help me with a related issue I’m having? I have the font weight for my navigation links set to increase on hover. Here’s the code (I included everything related to links and the navigation bar in case it’s relevant):

a {
  font-weight: 700 !important;
  text-decoration: none !important;
}

a:hover {
  color: #941215 !important;
}

.header-nav-item a {
  font-weight: 400 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.0125rem !important;
  text-transform: uppercase !important;
}

.header-nav-item a:hover {
  font-weight: 700 !important;
  letter-spacing: -0.0125rem !important;
}

.header-nav-item--active a {
  color: #941215 !important;
  font-weight: 700 !important;
  letter-spacing: -0.0125rem !important;
  text-decoration: none !important;
  background-image: none !important;
}

Because increasing the font weight increases the width of the text, when you hover over a link in the navigation, it causes all the links to shift. I want them to stay in the same place. I figure that increasing the size of whatever container each link is in will fix this, but I have no idea how to do that. Do you have any ideas?

I was able to remove the underline from the active nav page but I also want to remove the underline from the active pages in my dropdown from the nav bar.

I've tried a few different configurations but so far nothing is working.

Clearly this isn't the right code for it but I'm essentially looking for a working version of what I thought this would do:

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

On 7/26/2022 at 5:46 AM, MikaylaNelson said:

I was able to remove the underline from the active nav page but I also want to remove the underline from the active pages in my dropdown from the nav bar.

I've tried a few different configurations but so far nothing is working.

Clearly this isn't the right code for it but I'm essentially looking for a working version of what I thought this would do:

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

 

I'm also wanting to know how to do this.

On 8/16/2022 at 1:35 AM, vjtk said:

I'm also wanting to know how to do this.

Here you go:

.header-nav-folder-item-content  {
  background-image: none!important;

}