Navigation Hover Line Effects Using CSS

If you are looking for a great trick in you navigation menu and wanted to have a hover effect line at the button just like the image above well try this css code trick below.

/**Navigation Bottom Hover effect**/
nav {
    height: 40px;
    border-bottom: 1px solid #EEE; /* Grey divide 1px Horizontale */
    font-family: 'Open Sans', Helvetica, sans-serif;
}
.primary_nav li,
.user_nav li,
.nav-link {
    display: inline-block;
}

.primary_nav li {
    margin-right: 15px;
}

/* Link styles */

    .nav-link { /* Link default style */
        color: #dedede;
        font-size:1em;
        font-weight: 400;
        text-decoration: none;
    }

    .primary_nav .active { /* Add this class for active page */
         @extend .nav-link;

        color: #333;
        border-bottom: 3px solid #FF6D00;
        padding-bottom: 16px;
    }

.nav-link:hover {
    border-bottom: 3px solid #FF6D00;
    padding-bottom: 16px;
}
/**END Navigation Bottom Hover effect**/

Just simply put it in your styles.css files and then from you main page just call the class from css file like this below.

<ul class="primary_nav">

make sure you put it on in your unordered list tags of your navigation, and then next is to put also a class name like this below.
<li><a href="#menu1" class="nav-link active">Ron's Classes</a></li>

              <li><a href="#menu2" class="nav-link">Special Features</a></li>

after that you are good to go, refresh your page and then try hovering your navigation menu, mind looks like this below,

 Please share if it helps.