[Resolved] Underline for the active item menu 10px below item

[Ireneusz]

Hi guys,

I used hover animation for my primary navigation and it works great (https://docs.generatepress.com/article/adding-menu-hover-animation/) with span class, but cannot figure it out for the secondary navigation.

The only thing I want to have an underline for the active item menu, 3px thick and 10px below the item (eventually to line up with the border).

Would you be willing suggest a CSS code? After trial and error I am unable to do it myself.

Thank you much.

[Elvin]

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. 🙂

A wise man once said:
"Have you cleared your cache?"

[Ireneusz]

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!

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[Ireneusz]

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

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[Ireneusz]

Thank you!

[Elvin]

Thank you!

No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts