Underline top nav current link

Hi Ian,

For the basic underline, here is something you can add in Appearance > Customize > Additional CSS:

.inside-navigation .menu li.menu-item:not(:last-child) a {
    text-decoration: underline;
}

If you want something more noticeable, you can try this instead:

.inside-navigation .menu li.menu-item:not(:last-child) a {
    line-height: 40px;
}

.inside-navigation .menu li.menu-item:not(:last-child) a:after {
  content: "";
  position: absolute;
  width: 80%;
  height: 2px;
  background-color: rgba(84, 85, 106, 1);
  bottom:0;
  left: 50%;
  transform:translateX(-50%);
}

Kindly modify the values to your preference.

Hope this helps! :)

Thanks for this Fernando. I think I made a mistake with my request. I only want the underline to appear on current links. Hover would be good to. So if I go to about us and hover over that link, the underline will appear. If I go to that page (about) the link will stay underlined.

I see. No worries. If that’s the case, can you try this instead?:

.inside-navigation .menu li.menu-item:not(:last-child) a {
    line-height: 40px;
}

.inside-navigation .menu li.menu-item:not(:last-child).current-menu-item a:after {
  content: "";
  position: absolute;
  width: 80%;
  height: 2px;
  background-color: rgba(84, 85, 106, 1);
  bottom:0;
  left: 50%;
  transform:translateX(-50%);
}

.inside-navigation .menu li.menu-item:not(:last-child):not(.current-menu-item):hover a:after{
  content: "";
  position: absolute;
  width: 80%;
  height: 2px;
  background-color: rgba(84, 85, 106, 1);
  bottom:0;
  left: 50%;
  transform:translateX(-50%);
}

Kindly let us know how it goes. :)

That's awesome! Thanks Fernando :-)

You’re welcome Ian! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. :)