[Resolved] Menu underline that respects the padding

[Florian]

Hey,
I want to add a underline to selected menu items.
This code I found online works:

@media (min-width:769px) {
.main-navigation .main-nav ul li[class*=”current-menu-“] > a {
border-bottom: 2px solid #ffffff;
}
}

but it is much wider than the menu item because it doesnt respect the padding. Can you tell me how to create an underline for selected menu items that are only as wide as the menu item itself?

[David]

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.

[Florian]

Thank you, that works!

[David]

Glad to be of help.

[Florian]

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.

[David]

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.

[Florian]

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.

[Florian]

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

[Florian]

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!

[David]

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

[Florian]

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

[David]

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

[Florian]

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.

[David]

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

[Florian]

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

[Author]

Posts