[Resolved] Animating link underlines for main menu

[Michael]

Hi, I am want to have a animated underline under each menu item. Like this example: http://tobiasahlin.com/blog/css-trick-animating-link-underlines/

The code below is not targeting the text…any suggestions would be great? Also this would be a great feature for the menu addon.

.main-navigation .main-nav ul li > a:hover, .main-navigation .main-nav ul li > a:focus, .main-navigation .main-nav ul li.sfHover > a {
  color: red;
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

cheer Michael

[Luiz Bills]

I used this effect in a site with this css:

/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 2px;

    background-color: currentColor;
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 50%;
}

[Tom]

Nice CSS, Luiz! Works great for me 🙂

[Michael]

Hi Luiz,

Thank you for the css it works well and looks great. I really appreciate it:)

Cheers
Michael

[Darrell]

Hello,

I”ve added the above CSS from Luiz to have each menu item underlined when hovered over. However, when my page loads, the page that I’m currently on is already underlined without me hovering. I’m a newbie and I may be making an obvious mistake that I don’t see. My site is not up so I can’t provide a link. Could you please point me in the right direction.

Thank you,

Darrell

[Tom]

Try removing this line:

.main-navigation .menu > .menu-item.current-menu-item > a::after,

[Darrell]

Hey Tom,

Thank you so much for getting back to me. That worked like a charm and solved my problem!

Darrell

[Tom]

Glad I could help 🙂

[Farokh]

Thank you Luiz

That was awesome!!!

[Kyle]

solved

silly me 🙁

[Farokh]

HI TOM,

In the CSS Luiz has provided, the underline covers 50% of the menu item.
How can I change this to full item length (100%)?

/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 2px;

    background-color: currentColor;
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 50%;
}

Thanks

[Leo]

Try this:

/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 2px;

    background-color: currentColor;
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 100%;
}

[Farokh]

No, it’s not right. It moves to the left. has to do something with the -50% I guess.

[Farokh]

Got it. This worked very well for me:

/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 2px;

    background-color: currentColor;
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 90%;
}

[Leo]

Thanks for sharing!

[Author]

Posts