Navigation bar is a very important role in website. It can help user to interact to whole website with its links.
Website top navigation bar component. Here you will find 3 Live demo of Navigation bar
Follow below steps to make you done.
Step 1 – Add HTML
<div class="container">
<!-- Demo 1 -->
<nav class="navigation_1">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
<!-- Demo 2 -->
<nav class="navigation_2">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
<!-- Demo 3 -->
<nav class="navigation_3">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>Step 2 – Add CSS
body {
margin: 0px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #000000;
font-size: 16px;
line-height: 24px;
}
.container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
/* Navigation 1 demo */
.navigation_1 {
background-color:#000000;
overflow:hidden;
margin-bottom: 20px;
}
.navigation_1 ul {
margin: 0px;
padding-left: 0px;
list-style-type:none;
display: flex;
align-items: center;
}
.navigation_1 ul li a {
color:#ffffff;
text-align:center;
padding:16px 30px;
text-decoration:none;
display: block;
transition: background-color 0.3s ease-in-out;
}
.navigation_1 ul li:hover a, .navigation_1 ul li.active a {
background-color:#008264;
}
/* Navigation 2 demo */
.navigation_2 {
margin-bottom: 20px;
}
.navigation_2 ul {
margin: 0px;
padding-left: 0px;
list-style-type:none;
display: flex;
align-items: center;
}
.navigation_2 ul li a {
color:#000;
font-weight: 600;
text-align:center;
padding:16px 30px;
text-decoration:none;
display: block;
transition:color 0.3s ease-in-out;
}
.navigation_2 ul li:hover a, .navigation_2 ul li.active a {
color: #008264;
}
/* Navigation 3 demo */
.navigation_3 {
}
.navigation_3 ul {
margin: 0px;
padding-left: 0px;
list-style-type:none;
display: flex;
align-items: center;
}
.navigation_3 ul li {
padding-left: 30px;
padding-right: 30px;
}
.navigation_3 ul li a {
color:#555;
font-weight: 600;
text-align:center;
padding:12px 0px;
text-decoration:none;
display: block;
transition:color 0.3s ease-in-out;
position: relative;
}
.navigation_3 ul li a::after {
content: "";
height: 2px;
background-color: #008264;
position:absolute;
bottom: 12px;
left: 0px;
width: 0px;
transition: 0.3s ease-in-out;
}
.navigation_3 ul li:hover a::after, .navigation_3 ul li.active a::after {
width: 100%;
}
.navigation_3 ul li:hover a, .navigation_3 ul li.active a {
color: #000;
}Checkout Live demo Top Navigation Bar
