Jump to content

change the color of the underline from the top menu

Recommended Posts

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

Link to comment
  • Replies 14
  • Views 2.8k
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
  • 2 weeks later...

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

Screenshot 2024-04-08 at 08.53.47.png

Screenshot 2024-04-08 at 08.57.43.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.