Archived topic

How to Show Bold Underline on Hover at Primary Navigation Menu

3 replies · Started by sajedulhaque on June 25, 2020

Viewing posts 1–4 of 4

June 25, 2020 at 11:37 pm #1342222

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.

June 26, 2020 at 12:27 am #1342272

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

June 30, 2020 at 5:15 am #1346819

Hey. Thanks. It works perfectly.

June 30, 2020 at 5:46 am #1346871

Glad to hear that

This archived topic is closed to new replies.

Start building better websites today.