Menu underline that respects the padding

Hi there,

we can create a pseudo after element like so:

@media (min-width:769px) {

    .main-navigation .main-nav ul li[class*="current-menu-"]:not(.dropdown)>a {
        position: relative;
    }

    .main-navigation .main-nav ul li[class*="current-menu-"]:not(.dropdown)>a:after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 12px;
        right: 12px;
        height: 2px;
        background-color: #000000;
        pointer-events: none;
    }
    .is_stuck.main-navigation .main-nav ul li[class*="current-menu-"]:not(.dropdown)>a:after {
        bottom: 0;
    }
}

Bottom -5px pushes the line a little below the text, left and right positons are the same as horizontal padding, Height determines it thickness and background-color is its color.

Thank you, that works!

Glad to be of help.

Sorry, there is one problem. I use the sticky menu (always visible) and the underline is always placed under the bottom of the menu. It is like that no matter how large I set the sticky menu items' height.

I edited the code above to include a variation for the sticky navigation - it will now sit on the bottom of the nav bar when stuck.

Thank you, great! The only thing that doesn't look perfect is that the sticky menu has a sort of "expand animation" when it appears, and the bottom line has a bit of a delay to that. But if there is no easy fix for that I can live with it.

Oh, and is it possible to remove that line for a menu item that is a drop down?

Nevermind, there are other problems like the line disappearing in drop-down menus when I hover over the item below the selected one.
I think I will leave it for now since this seems all a bit messy.

Thanks anyways! I think this will work perfect for menus without drop downs!

No problems. I edited the code above to exclude dropdowns in case you want to revisit in the future.

Ok, so then only 1 thing is left: The line also moves up and down for drop down items, but they never change their size. Is this the correct way to fix it:

.main-navigation .main-nav .dropdown ul li[class*="current-menu-"]>a:after {
bottom: 0;
}

Do you think it would be better if the submenus didn't have the underlines? considering they're not always visible?

I am not sure what is the best practice here. To me right now it looks correct when they ARE underlined. But I am not sure. Do you think different?
The code you posted above removes the underline for the dropdown parent item, but they are still visible on the sub items.
The code I added stops them from moving up and down with the sticky menu.

I think what you have works really well - if you want the line in the submenus to fit the menu item width then you can add a display: inline-block; property inside this rule:

.main-navigation .main-nav ul li[class*="current-menu-"]:not(.dropdown)>a {
    position: relative;
}

ie.

.main-navigation .main-nav ul li[class*="current-menu-"]:not(.dropdown)>a {
    position: relative;
    display: inline-block;
}

Now everything seems to be perfect, thank you very much!