[Resolved] Primary Navigation Header Line Design

[Tibs]

Hello there,

Would it be possible to add an underline hover effect? So here’s how the header menu item would look without hover: http://prntscr.com/sn3ys6.

And here’s how it’d look like with hover: http://prntscr.com/sn3z9s

(I’ve attached example of menu bar in website URL)

Thanks!

[David]

Hi there,

add this CSS to your site:

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        display: block;
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 20px;
        height: 4px;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
        background-color: currentColor;
        opacity: 0;
        transition: 0.3s all ease;
        pointer-events: none;
    }
    .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 {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

[Tibs]

Thank you David!

Is there a way to make it like 2 inches from the menu item?

Here’s how it currently looks: http://prntscr.com/snol5w

Here’s how it should look: http://prntscr.com/sn3z9s

Thanks again David!

[Tibs]

Also, is there a way to move menu hamburger to right of logo: http://prntscr.com/snp95g

[Leo]

Can you link us to your site in question with David’s CSS applied?

[Tibs]

Done 🙂

[David]

Adjusted the code here

[Tibs]

You’re the man. Thank you David!

[David]

You’re welcome

[Tibs]

Quick question David:

After I click on the menu header item, the color remains white. Is there a way where after you click on menu item, the color remains the same, like this: http://prntscr.com/sppeil

[David]

In Customizer > Colors > Primary Navigation you can set the Text Current color

[Tibs]

Thank you!

[David]

You’re welcome

[Author]

Posts