[Support request] How to Show Bold Underline on Hover at Primary Navigation Menu

[sajedulhaque]

Hey, I want to show bold underline on hover at primary navigation menu on my site [ https://machineryhacks.com ]. I am currently using generatepress latest premium version.

I want to customize the primary navigation menu like this site: [ http://www.woodworknation.com ]

Thanks in Advance.

[David]

Hi there,

try this CSS:

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 12px;
        left: 12px;
        bottom: 0;
        display: block;
        height: 5px;
        background-color: #d5db12;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        opacity: 1;
    }
}

[sajedulhaque]

Hey. Thanks. It works perfectly.

[David]

Glad to hear that

[Author]

Posts