CSS Navigation Bar

Navigation bar consist of different links for the different section of a website. These links help in linking or binding site altogether.

It mostly displayed on the top of the page and can be displayed horizontally, vertically or in fixed form.

It should come before the other section of the webpage so that we can make those sections accessible through navigation bar.


Horizontal Navigation Bar

The horizontal navigation bar is the horizontal list of links, which is generally on the top of the page.

Above example help in showcasing the use of ul list to make navigation bar. We are adding the overflow: hidden property that prevents the li elements from going outside of the list, display: block property displays the links as the block elements and makes the entire link area clickable.

We are also adding the float: left property, which uses float for getting the block elements to slide them next to each other.

If we want the full-width background color then we have to add the background-color property to <ul> rather than the <a> element.

Input:-

Index.html
	
<body> 
	 <ul>
     <li>
        <a class="active" href="#">
           Link 1
       	</a>
     </li>
     <li>
        <a href="#">
           Link 2
        </a>
     </li>
     <li>
        <a href="#">
           Link 3
       </a>
     </li>
     <li>
       <a href="#">
          Link 4
       </a>
     </li>
     <li>
       <a href="#">
          Link 5
       </a>
   </li>
 </ul>
</body>

Style.css
ul {  
   list-style-type: none;  
   margin: 0;  
   padding: 0px;  
   overflow: hidden;  
   background-color: #ccc;  
}    
li {  
  float: left;  
}   
li a {  
  display: block;  
  color: blue;  
 	font-size:20px;  
  text-align: center;  
  padding: 10px 20px;  
  text-decoration: none;  
}  
.active{  
	background-color: gray;  
	color: #fff;  
}  
li a:hover {  
  background-color: #ddd;  
  color: #fff;  
}

Output:-


Vertical Navigation Bar

In vertical navigation bar, we will arrange the navbar links in vertical form.

Input:-

Index.html
	
<body> 
	 <ul>
     <li>
        <a class="active" href="#">
           Link 1
       	</a>
     </li>
     <li>
        <a href="#">
           Link 2
        </a>
     </li>
     <li>
        <a href="#">
           Link 3
       </a>
     </li>
     <li>
       <a href="#">
          Link 4
       </a>
     </li>
     <li>
       <a href="#">
          Link 5
       </a>
   </li>
 </ul>
</body>

Style.css
ul {  
   list-style-type: none;  
   margin: 0;  
   padding: 0px;  
   overflow: hidden;  
   background-color: #ccc;  
} 
li a {  
  display: block;  
  color: blue;  
 	font-size:20px;  
  padding: 10px 20px;  
  text-decoration: none;  
}  
.active{  
	background-color: gray;  
	color: #fff;  
}  
li a:hover {  
  background-color: #ddd;  
  color: #fff;  
}

Output:-


Fixed Navigation Bar

This is a navigation bar which is fixed on the top and when scroll up or down, it will be visible.

Input:-

Index.html
	
<body> 
	 <ul>
     <li>
        <a class="active" href="#">
           Link 1
       	</a>
     </li>
     <li>
        <a href="#">
           Link 2
        </a>
     </li>
     <li>
        <a href="#">
           Link 3
       </a>
     </li>
     <li>
       <a href="#">
          Link 4
       </a>
     </li>
     <li>
       <a href="#">
          Link 5
       </a>
   </li>
 </ul>
	<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</body>

Style.css
ul {  
   list-style-type: none;  
   margin: 0;  
   padding: 0px;  
   overflow: hidden;  
   background-color: #ccc;  
	  position: fixed;
	  top: 0;
} 
li{
	  float: left;
}
li a {  
  display: block;  
  color: blue;  
 	font-size:20px;  
  padding: 10px 20px;  
  text-decoration: none;  
}  
.active{  
	background-color: gray;  
	color: #fff;  
}  
li a:hover {  
  background-color: #ddd;  
  color: #fff;  
}

Output:-


Sticky Navigation Bar

The position: sticky; property is used to position the element based on the scroll position of the user.

This CSS property allows the elements to stick when the scroll reaches to a certain point. Depending upon the scroll position, a sticky element toggles in between fixed and relative property.

Input:-

Index.html
	
<body> 
	  <h1>Sticky Navbar</h1>
	 <ul>
     <li>
        <a class="active" href="#">
           Link 1
       	</a>
     </li>
     <li>
        <a href="#">
           Link 2
        </a>
     </li>
     <li>
        <a href="#">
           Link 3
       </a>
     </li>
     <li>
       <a href="#">
          Link 4
       </a>
     </li>
     <li>
       <a href="#">
          Link 5
       </a>
   </li>
 </ul>
	<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</body>

Style.css
ul {  
   list-style-type: none;  
   margin: 0;  
   padding: 0px;  
   overflow: hidden;  
   background-color: #ccc;  
	  position: sticky;
	  top: 0;
} 
li{
	  float: left;
}
li a {  
  display: block;  
  color: blue;  
 	font-size:20px;  
  padding: 10px 20px;  
  text-decoration: none;  
}  
.active{  
	background-color: gray;  
	color: #fff;  
}  
li a:hover {  
  background-color: #ddd;  
  color: #fff;  
}
p{
	 padding-top: 1000px;
}

Output:-


Dropdown Navigation Bar

This dropdown navigation bar consist of dropdowns on hover. We can manipulate these dropdown according to requirement.

Input:-

Index.html
	
<body> 
	  <h1>Sticky Navbar</h1>
	 <ul>
     <li>
        <a class="active" href="#">
           Link 1
       	</a>
     </li>
     <li>
        <a href="#">
           Link 2
        </a>
     </li>
     <li>
        <a href="#">
           Link 3
       </a>
     </li>
     <li>
       <a href="#">
          Link 4
       </a>
     </li>
     <li class="dropdown">
        <a href="#" class="dropbtn">Link 5</a>
        <div class="dropdown-content">
           <a href="#">Submenu 1</a>
           <a href="#">Submenu 2</a>
           <a href="#">Submenu 3</a>
        </div>
     </li>
 </ul>
</body>

Style.css
ul {  
  list-style-type: none;  
  margin: 0;  
  padding: 0;  
  overflow: hidden;  
  background-color: lightgray;  
}  
  
li {  
  float: left;  
}  
  
li a, .dropbtn {  
  display: inline-block;  
  color: blue;  
  font-size:20px;  
  text-align: center;  
  padding: 10px 20px;  
  text-decoration: none;  
}  
.active{  
  background-color: gray;  
  color: white;  
}  
li a:hover , .dropdown:hover .dropbtn{  
  background-color: orange;  
  color: white;  
}  
  
.dropdown-content {  
  display: none;  
  position: absolute;  
  background-color: lightblue;  
  min-width: 160px;  
  box-shadow: 5px 8px 10px 0px black;  
 }  
  
.dropdown-content a {  
  color: black;  
  padding: 12px 16px;  
  text-decoration: none;  
  display: block;  
  text-align: left;  
}  
  
.dropdown-content a:hover {  
 background-color: gray;  
 color: white;  
}  
  
.dropdown:hover .dropdown-content {  
  display: block;  
}	

Output:-