change the color of the underline from the top menu

I wanted to change the color of the underline from the top menu by ussing this custom css:

/* change header nav active style */
.header-nav-item--active a {
  background-image: none !important;
}

/* Change the underline color of the top menu links */
.header-nav-item a {
  position: relative;
  text-decoration: none !important;
  color: #000000; /* Set the color of the link */
}

.header-nav-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* Adjust the positioning of the underline */
  width: 100%;
  height: 2px; /* Adjust the height of the underline */
  background-color: #CE099F; /* Set the color of the underline */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s;
}

.header-nav-item a:hover::after,
.header-nav-item a:focus::after,
.header-nav-item--active a::after {
  visibility: visible;
  opacity: 1;
}

/* Optional: Change the underline color when the link is active or focused */
.header-nav-item--active a::after {
  background-color: #CE099F; /* Set the color of the underline when the link is active */
}
 

it is almost working, but the lenght of the underline doesn't match the text that's on top, but the widht of the box. How can I change it so the underline goes only below the text.

I am including a video of the error to be more clear

What is site url? We can check easier

thank you: https://www.giselarozental.com/

On 7/4/2023 at 2:35 AM, Mica77 said:

thank you: https://www.giselarozental.com/

Keep above code + add this code under

div.header-nav-item a {
    display: inline-block;
}

@tuanphan great, this worked, thank you so much!!

It is not working on the mobile version, do you know how can I fix that?

On 7/20/2023 at 10:05 PM, Mica77 said:

@tuanphan great, this worked, thank you so much!!

It is not working on the mobile version, do you know how can I fix that?

I see you solved with this code?

.header-menu-nav-item-content {
    position: relative;
    display: inline-block;
    pointer-events: none;
}

Hi, when I add that code then I see a black line

(the original from the template that I "turn off" by adding: 
/* change header nav active style */
.header-nav-item--active a {
  background-image: none !important;
}

the fuchsia underline is not working on the mobile version, maybe because there is no "hover" but tap on mobile? I don't know

Yes. Mobile has no hover.

thank you, is there any way to have on the mobile version the fucsia underline on the top menu when tapping it?

Try this CSS code

div.header-menu-nav-item a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: #ce099f;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s;
}
div.header-menu-nav-item a:hover::after {
    visibility: visible;
    opacity: 1;
}