[Resolved] Current and selected menu items underline

Home Forums Support [Resolved] Current and selected menu items underline

Home Forums Support Current and selected menu items underline

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #624368
    Harris

    Hello,

    How can I underline the current and selected menu items of the main menu items only (not submenus) and having the line just under the text, with a width of i.e. 50% of the text and aligned on left according to the text?

    I am trying this

    .main-navigation .main-nav ul li a {
    text-decoration: none;
    border-bottom: 3px solid #ff8c3d;
    padding: 0 30px;
    }

    but the underline goes at the bottom of the div and as the menu items height is big (in order to center it with the logo) it doesn’t look nice.

    Additionally how can I give a left and right padding inside to the submenu’s div?

    Thanks
    Harris

    #624372
    Harris

    Worked it out a bit further with

    .main-navigation .main-nav ul li[class*=”current-menu-“] > a:after,
    .main-navigation .main-nav ul li:hover > a:after,
    .main-navigation .main-nav ul li.sfHover:hover > a:after {
    content: “”;
    display: block;
    width: 50%;
    border-bottom: 6px solid #ff8c3d;
    position: relative;
    top: -35px;
    opacity: 1;
    }

    Still can’t exclude the submenu items

    By the way, is there some way to remove the arrow showing the submenu existance (and don’t count it either when counting the underline width)?

    #624386
    Harris

    Worked it out a bit more further

    Now I am with

    .main-navigation .menu > .menu-item > a::after {
    content: “”;
    position: relative;
    top: -35px;
    opacity: 1;
    display: block;
    width: 0;
    border-bottom: 6px solid #ff8c3d;

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

    It seems not affecting the submenu items and have added a slight animation too.

    Please just confirm that this code is ok and please have a look at my previous questions.

    Thanks
    Harris

    #624412
    David
    Staff
    Customer Support

    Hi Harris,

    the code looks fine and works well. Looks like you have it working as you want. Code provided here to remove the drop down arrow:

    https://generatepress.com/forums/topic/arrow-on-menu-drop-downs/#post-172450

    let us know

    #624565
    Harris

    Thanks David for confirming!

    Can you please let me know how can I add some padding to the drop down menu “box” (box containing child items).

    Thanks
    Harris

    #624674
    David
    Staff
    Customer Support

    You can try this:

    .dropdown-hover .main-navigation:not(.toggled) ul li.sfHover>ul, .dropdown-hover .main-navigation:not(.toggled) ul li:hover>ul {
        padding: 10px;
        right: 0;
    }
    #624925
    Harris

    Thanks!

    #625044
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.