Underline for the active item menu 10px below item

Hi,

I'm not sure I understand what you mean.

To clarify: You want the menu item's underline on active state to be aligned with the second nav's border?

Let us know. :)

Hi,

I'd like to add height variable of the underline of the active item to my secondary nav. I think I can manage the rest :)

Thank you!

You can try replacing what you're currently using with the secondary nav with this CSS:

@media (min-width: 769px) {
    nav#secondary-navigation .main-nav .secondary-menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    nav#secondary-navigation .main-nav .secondary-menu > .menu-item.current-menu-item > a::after,
    nav#secondary-navigation .main-nav .secondary-menu > .menu-item.current-menu-ancestor > a::after,
    nav#secondary-navigation .main-nav .secondary-menu > .menu-item > a:hover::after {
        width: 50%;
    }
}

The effect is basically the same, I just changed the CSS selector to apply to your secondary navigation.

And since it is using an @media, it only applies to whatever is indicated on the set media rule.

Hi Elvin,

I'm not sure if I made myself clear, sorry for that. I don't want any animation/hover on the menu.

The only thing I wanted was to highlight the current menu item with a 3px thick line and a greater space between a text and a line. After a while I did it using border-bottom and padding-bottom and it did the job I wanted, but I'm not sure if that's correct in CSS terms.

I used:

.secondary-navigation li.current-menu-item > a .menu-text {
	padding-bottom: 12px;
    border-bottom: 3px solid #f1c40f;
}

body:not(.single) .second-nav {
    padding-bottom: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

The only thing I wanted was to highlight the current menu item with a 3px thick line and a greater space between a text and a line. After a while I did it using border-bottom and padding-bottom and it did the job I wanted, but I’m not sure if that’s correct in CSS terms.

oh right my bad:

Your code does make sense and it should be enough for what you're trying to accomplish.

Instead of the height, you simply adjust the border width from the shorthanded properties.

But if you like the ::after approach, we can still adopt some from the code I've previously provided.

Instead of using border-bottom: 3px solid #f1c40f;, we can use the pseudo element ::after

.secondary-navigation li.current-menu-item > a .menu-text::after {
    position: absolute;
    right: 0;
    bottom: -10px;
    display: block;
    width: 100%;
    background-color: #f1c40f;
    content: "";
    height: 3px;
}

You then adjust the vertical placing with bottom: property.

But this literally does the same thing as your CSS. There's no right or wrong CSS.

Thank you!

Thank you!

No problem. :)