Site logo

[Resolved] CSS for Site Nav Current Page Color and Underline

Home Forums Support [Resolved] CSS for Site Nav Current Page Color and Underline

Home Forums Support CSS for Site Nav Current Page Color and Underline

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2448459
    Alan

    Added the below CSS, that I found in the forum, to modify one of the three elements in the main navigation menu. All the elements are anchors, I believe.
    Was interested in making menu item 1711, along with background and hover color, to also color while the active page. The other elements already do this from the customizer.
    Was also interested in creating an underline, along with color, for all the elements while on the active page.
    Can’t seem to work out the correct CSS.
    Thanks for your help.

    #site-navigation .main-nav > ul > li#menu-item-1711:hover > a {
    background-color: #f3f3f3;
    color: blue;
    }
    #site-navigation .main-nav > ul > li#menu-item-1711 > a {
    background-color: #f3f3f3;
    border-radius: 50px;
    color: black;
    }

    #2448953
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to the site where you want to make this change ?
    If you need to provide a URL / login then you can add it to the Private Information field below you reply.

    #2448970
    Alan

    Using the forum, I added this CSS. Everything works fine but I’ll take any advice to make anything better.
    Thanks.
    Added private info.
    I also realized that active and current are different.

    #site-navigation .main-nav > ul > li[class*=”current-menu-“] > a {
    border-bottom: 3px solid black;
    }
    #site-navigation .main-nav > ul > li#menu-item-1711[class*=”current-menu-“] > a {
    border-bottom: 4px solid black;
    color: var(–accent)
    }

    #2449631
    Fernando
    Customer Support

    Hi Alan,

    What sort of change are you trying to make?

    #site-navigation .main-nav > ul > li[class*="current-menu-"] > a {
    border-bottom: 3px solid black;
    }

    Do you want a smaller underline? If so, you can try replacing this:

    with this:

    #site-navigation .main-nav > ul > li[class*="current-menu-"] > a:after {
        content: "";
        display: block;
        height: 1px;
        width: 50%;
        transform: translateX(50%);
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #000;
        z-index: 999;
    }
    
    #site-navigation .main-nav > ul > li[class*=”current-menu-“] > a {
        position: relative;
    }
    #2450042
    Alan

    Thanks a lot for your help Fernando. I’ll keep playing and learning.
    Alan

    #2450943
    Fernando
    Customer Support

    You’re welcome, Alan!

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