Underline hover animation navigation bar

Site URL: https://www.lucienandsolenn.com/

Hello there! 

I know that there is some post about this, and I found a good code for it . However, I cannot find a way to "stop the line" under the drop down menu links and make it 100% of the word, not beyond. How can I do? I post the picture of it below. Thank you in advance!

My website password : Forthesakeoflove

Here is the css code : 

.header-nav-item > a:after, .header-nav-folder-item > a:after {
  content:'';
  width: 0px;
  height: 1px;
  background: #fff;
  display: block;
  transition: width .2s ease;
}

.header-nav-item > a, .header-nav-folder-item:hover {
  background: none !important;
}

.header-nav-item--active > a:after, .header-nav-item:hover > a:after, .header-nav-folder-item:hover > a:after {
  width: 100%;
}

.header-nav-folder-item:hover > a {
  color: #fff !important;
} 

3 hours ago, Soona said:

Site URL: https://www.lucienandsolenn.com/

Hello there! 

I know that there is some post about this, and I found a good code for it . However, I cannot find a way to "stop the line" under the drop down menu links and make it 100% of the word, not beyond. How can I do? I post the picture of it below. Thank you in advance!

My website password : Forthesakeoflove

Here is the css code : 

.header-nav-item > a:after, .header-nav-folder-item > a:after {
  content:'';
  width: 0px;
  height: 1px;
  background: #fff;
  display: block;
  transition: width .2s ease;
}

.header-nav-item > a, .header-nav-folder-item:hover {
  background: none !important;
}

.header-nav-item--active > a:after, .header-nav-item:hover > a:after, .header-nav-folder-item:hover > a:after {
  width: 100%;
}

.header-nav-folder-item:hover > a {
  color: #fff !important;
} 

Do you mean something like this?

I try the following code and it seems fine

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

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Yes that's perfect! thank you it was actually easier than I thought 😉 thank you very much! 

How can I make this work for mobile menu? I have a forced mobile menu on desktop. I tried this code, but the underline animation is across the entire screen.

.header-menu-nav-item > a:after, .header-menu-nav-folder-item > a:after {
  content:'';
  width: 0px;
  height: 1px;
  background: #443A31;
  display: block;
  transition: width .5s ease;
}
.header-menu-nav-item > a, .header-menu-nav-folder-item:hover {
  background: none !important;
}
.header-menu-nav-item--active > a:after, .header-menu-nav-item:hover > a:after, .header-menu-nav-folder-item:hover > a:after {
  width: 100%;
}
.header-menu-nav-folder-item:hover > a {
  color: #443A31 !important;
}
body:not(.header--menu-open) .header-menu-nav-item--active>a {
    background-position: 0 calc(~"100% + 1px") !important;
}

On 2/19/2024 at 12:28 PM, JamIsJam88 said:

How can I make this work for mobile menu? I have a forced mobile menu on desktop. I tried this code, but the underline animation is across the entire screen.

 

 

.header-menu-nav-item > a:after, .header-menu-nav-folder-item > a:after {
  content:'';
  width: 0px;
  height: 1px;
  background: #443A31;
  display: block;
  transition: width .5s ease;
}
.header-menu-nav-item > a, .header-menu-nav-folder-item:hover {
  background: none !important;
}
.header-menu-nav-item--active > a:after, .header-menu-nav-item:hover > a:after, .header-menu-nav-folder-item:hover > a:after {
  width: 100%;
}
.header-menu-nav-folder-item:hover > a {
  color: #443A31 !important;
}
body:not(.header--menu-open) .header-menu-nav-item--active>a {
    background-position: 0 calc(~"100% + 1px") !important;
}

 

You can share link to site where you have problem, we can check easier

On 2/20/2024 at 3:52 AM, tuanphan said:

You can share link to site where you have problem, we can check easier

I was actually able to solve this. Here is the code if anyone else needs a solution.

.header-menu-nav-item>a:hover {
  color: #443A31 !important;
  font-style: italic;
}
@media only screen and (min-width:768px) {
  .header-menu-nav-item > a:after, .header-menu-nav-folder-item > a:after {
    content:'';
    width: 0px;
    height: 1px;
    background: #443A31;
    display: block;
    transition: width 1s ease;
  }
}
@media only screen and (max-width:767px) {
  .header-menu-nav-item > a:after, .header-menu-nav-folder-item > a:after {
    content:'';
    width: 0px;
    height: 1px;
    background: #443A31;
    display: block;
    transition: width 0.25s ease;
  }
}
.header-menu-nav-item > a, .header-menu-nav-folder-item:hover {
  background: none !important;
}
.header-menu-nav-item--active > a:after, .header-menu-nav-item:hover > a:after, .header-menu-nav-folder-item:hover > a:after {
  width: 100%;
}
.header-menu-nav-folder-item:hover > a {
  color: #443A31 !important;
}
body:not(.header--menu-open) .header-menu-nav-item--active>a {
  background-position: 0 calc(~"100% + 1px") !important;
}
.header-menu-nav-item a {
  display: inline-block !important;
}
.header-menu-nav-item {
  text-align: right;
}