Underline Menu Items in Navbar


How do I underline menu items that have been selected in my navbar? I would like it so that the current page you are in is underlined in the navbar.

Any help would be greatly appreciated!

Hey there

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*add underline to current menu item */
.main-navigation .current_page_item > a{
  border-bottom: solid 4px grey;

Best Regards,

Thank you! thank works great, but is there a way to shift the line upwards so it is not touching the edge of the navbar?

Hello there,

You can use the following CSS code to reduce the height of the menu area thus moving the bottom border.

/*Menu height*/
.nav-bar a {
    height: 40px;

Best Regards,