Archived topic

Animating link underlines for main menu

39 replies · Started by Michael on June 10, 2016

Viewing posts 1–15 of 40

June 10, 2016 at 3:53 am #200743

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

June 10, 2016 at 8:38 am #200801

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

June 10, 2016 at 11:47 pm #200990

Nice CSS, Luiz! Works great for me :)

June 12, 2016 at 12:13 am #201229

Hi Luiz,

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

Cheers
Michael

February 22, 2017 at 7:01 pm #282758

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

February 23, 2017 at 12:26 am #282828

Try removing this line:

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

February 23, 2017 at 3:43 pm #283215

Hey Tom,

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

Darrell

February 23, 2017 at 8:12 pm #283268

Glad I could help :)

April 24, 2017 at 2:44 am #309570

Thank you Luiz

That was awesome!!!

May 7, 2017 at 8:42 pm #315193

solved

silly me :(

June 2, 2017 at 3:39 pm #327866

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

June 2, 2017 at 5:36 pm #327882

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

June 3, 2017 at 1:46 am #327976

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

June 3, 2017 at 3:48 am #328004

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

June 3, 2017 at 9:23 am #328098

Thanks for sharing!

This archived topic is closed to new replies.

Start building better websites today.