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

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

Home Forums Support Underline for the active item menu 10px below item

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1579002
    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.

    #1579150
    Elvin
    Staff
    Customer Support

    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?"

    #1579347
    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!

    #1579394
    Elvin
    Staff
    Customer Support

    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?"

    #1579452
    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);
    }
    #1579537
    Elvin
    Staff
    Customer Support

    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?"

    #1579575
    Ireneusz

    Thank you!

    #1579591
    Elvin
    Staff
    Customer Support

    Thank you!

    No problem. 🙂

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.