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

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

[David]

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.

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

[Fernando]

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

[Alan]

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

[Fernando]

You’re welcome, Alan!

[Author]

Posts