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.
Posts
