Primary Navigation Header Line Design

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

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!

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

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

Done :)

Adjusted the code here

You're the man. Thank you David!

You're welcome

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

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

Thank you!

You're welcome