main navigation highlight bar

Hi there,

you can remove the menu hover colors in the Customizer > Colors > primary navigation.
And then this CSS to add some solid bottom borders:

.main-navigation .main-nav ul li a {
    border-bottom: 20px solid transparent;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-bottom: 20px solid #000;
}

Regarding CSS for solid bottom borders.

I ve put it in Customise - Additional CSS and it didnt do nothing

So I installed Simple CSS plugin and pasted there and again didnt do nothing???

Please let me know

Hi there,

it is working if you look closely you will see it but its obscured by the hover colors. If you can't then try clearing your browser cache.

Really??

Just changed "background current" to blue and all I see is big blue rectangle around "Home" page navigation.
No Bottom bar, just big blue rectangle
Please explain
Many thanks

I just adjusted the code above to make the border 20px wide, add that and you should definitely be able to see them.

Yes, it works. Thank you

It's just that "bottom bar" is too wide and linking with next page during hover

Could it be done as "underline" - it'll follow length of the particular word in main navigation?

Many thanks

How about trying this:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li a:after {
        content: '';
        display: block;
        height: 2px;
        background-color: transparent;
        width: 100%;
        top: 0px;
        position: relative;
        transition: all 0.35s ease-in;
    }

    .main-navigation .main-nav ul li:hover a:after,
    .main-navigation .main-nav ul li[class*="current-menu-"]>a:after {
        background-color: #000;
        top: -10px;
    }
}

Perfect!
Thank you very much

You're welcome, glad to be of help