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

is there a way to remove the black line under the active page?

Is there a way to remove the black line and only have one red underline when I am on one of the pages in the dropdown menu?

On 3/22/2024 at 11:51 PM, Dylan_M said:

Is there a way to remove the black line and only have one red underline when I am on one of the pages in the dropdown menu?

If you share site url, I can check easier

Hello I have had another issue with the code.
1. Can you give me an additional code so that when I hover over the project folder it shows the red line on the subcategories?
2. Also my client sent me a screenshot of the site where when he is on one page for example home there is a red line beneath but when he clicks on "projekte" there is another line and when he hovers over a third title there a 3 red lines even though you can't open a page when you are on "projekte". Is it possible to remove that red line from the projects main title because there is no page on the main title  

the website password is: password 

website url: https://www.invest-bau.ch

ah and the last thing is it possible that the text underneath the project folder are left aligned?