[Support request] How to apply the underline-on-hover-effect to menu-item-text?

[Sascha]

Hey there,

I’d like to replicate the animated-underline-effect from the nav-menu on this site (source) to the one on that site (target).

Currently, I have applied this CSS to the customizer, but the underline-effect applies to the menu-items, but not to the text inside the items, like they do on source-site:

li > a::after {
bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0%;
  position: absolute;
  background: var(--accent);
  transition: width 0.2s ease 0s, left 0.1s ease 0s;
  width: 0;
}
li > a:hover::after, li > a.active-nav::after {
  width: 100%; 
  left: 0; 
}

Can you please help me to replicate the underline-effect appropriately?

Thank you in advance and kind regards,
Sascha

[Ying]

Try change this CSS:

li > a::after {
bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0%;
  position: absolute;
  background: var(--accent);
  transition: width 0.2s ease 0s, left 0.1s ease 0s;
  width: 0;
}
li > a:hover::after, li > a.active-nav::after {
  width: 100%; 
  left: 0; 
}

to this:

.main-navigation li > a::after {
  bottom: 10px;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  background: var(--accent);
  transition: width 0.2s ease 0s, left 0.1s ease 0s;
  width: 0;
}
.main-navigation li > a:hover::after, .main-navigation li > a.active-nav::after {
    width: calc(100% - 40px);
    left: 50%;
    transform: translatex(-50%);
    bottom: 10px;
}

[Sascha]

Thanks, Ying, but now 2 issues occur:

1. The underline is not going from left to right, instead it goes from center to left+right
2. The previous full-width underline effect applied to the menu-items still occurs

Hard to explain in words, so I recorded a brief screencast.

Can you please help me to fix this?

Thank you in advance and kind regards,
Sascha

[Ying]

Hum, then let’s switch back to your original CSS, then add this CSS:

.main-navigation .main-nav ul li a {
    padding-left: 0;
    padding-right: 0;
    margin-left: 20px;
    margin-right: 20px;
    position: relative;
}

[Sascha]

Thank you, looks good!

So now I’d like to have the active item underlined. How can I achieve this?

[Ying]

Use this selector for hover and current menu item:
.main-navigation .main-nav ul li > a:hover::after, .main-navigation .main-nav ul li[class*="current-menu-"] > a::after

I would suggest adding .main-navigation .main-nav ul before all the li > a::after selectors to make it more specific, otherwise, the effect will apply to list blocks in your content as well.

[Sascha]

Thanks a lot, looks perfect now 🙂

[Ying]

Awesome 🙂

[Sascha]

Hey there,

sorry for re-opening this ticket again.

The CSS is working well on this site (via Customizer), but not on that one (via Simple CSS).

How come?

Also: How to prevent the underline-effect to work on the last menu-item? Should work on all menu-items except for the last one 😉

Thank you in advance and kind regards,
Sascha

[Ying]

It’s working fine on the link you provided.

To remove the effect from the last menu item, change this selector
.main-navigation .main-nav ul li > a:hover::after, .main-navigation .main-nav ul li[class*="current-menu-"] > a::after

to:
.main-navigation .main-nav ul li:not(:last-child) > a:hover::after, .main-navigation .main-nav ul li[class*="current-menu-"]:not(:last-child) > a::after

[Sascha]

Oh, you were right 🙂

I have placed the post, where the CSS is added to, below the “Blog” menu item, but it looks a bit awkward, as you can see on this screenshot (link to the post)

I’d like to prevent the underline-effect for active menu-items, which contain sub-menu-items, to expand to the full-item width. Instead, I’d like to have it underline only below the text of these items.

Is this possible, too?

By the way: Your support is phenomenal, thank you sooo much for your help 🙏

Thank you in advance and kind regards,
Sascha

[Ying]

You are welcome 🙂

Underline only add to the parent menu items?

[Author]

Posts