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
Recording 2023-06-25 211613.mp4