CSS Navigation bar property that comes under GUI, helping guests to access information. A website’s navigation bar contains links to the site’s other sections.
A navigation bar is usually placed on the top of the page as a horizontal list of links. It can either be set below the logo or the header but should always be placed before the webpage’s main content.
The following section will discuss the horizontal and vertical navigation bars.
Horizontal Navigation Bar
The horizontal navigation bar is a horizontal list of links, normally at the top of the page.
Observe the example below to see how to create a horizontal navigation bar.
Example
In this example, we add the overflow: hidden property, preventing the li elements from going out of the list. We also add the “display:” block property which displays the links as block elements and makes the link area clickable.
We are also adding the property float: left for sliding the block elements next to each other using float, and the background-color property to <ul> rather than the <a> element to have the full-width background color.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: pink;
}
li {
float: left;
}
li a {
display: block;
color: black;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: black;
}
li a:hover {
background-color: violet;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Offers</a></li>
<li><a href="#">Services</a></li>
</ul>
</body>
</html>Border Dividers
Using the border-right property, we can add the border between the links in the navigation bar. Observe the following example.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: pink;
}
li {
float: left;
border-right: 1px solid blue;
}
li a {
display: block;
color: black;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: grey;
color: black;
}
li a:hover {
background-color: violet;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Offers</a></li>
<li><a href="#">Services</a></li>
</ul>
</body>
</html>Fixed Navigation Bars
Fixed navigation bars remain at the bottom or top of the page. Observe the following example.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
position: fixed;
width:100%;
top:0;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: pink;
}
li {
float: left;
border-right: 1px solid blue;
}
li a {
display: block;
color: black;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: black;
}
li a:hover {
background-color: violet;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Offers</a></li>
<li><a href="#">Services</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Hello Everyone</h1>
<h2 style="padding-bottom: 2000px; text-align: center;">Scroll to the end of the page to see the fixed navigation bar</h2>
</body>
</html>Sticky Navbar
This property allows the elements to stick when the scroll reaches a certain point. Sticky elements switch between fixed and relative properties based on scroll position. Observe the following example.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
position: sticky;
width:100%;
top:0;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: pink;
}
li {
float: left;
border-right: 1px solid blue;
}
li a {
display: block;
color: black;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: black;
}
li a:hover {
background-color: violet;
color: white;
}
</style>
</head>
<body>
<h1> Sticky navigation bar</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Offers</a></li>
<li><a href="#">Services</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Hello Everyone</h1>
<h2 style="padding-bottom: 2000px; text-align: center;">Scroll to the end of the page to see the sticky navigation bar</h2>
</body>
</html>Dropdown Navbar
Observe the following example to explain creating a dropdown menu inside a navigation bar.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: pink;
}
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: black;
}
li a:hover , .dropdown:hover .dropbtn{
background-color: violet;
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: orange;
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
h1,h2,h3{
text-align:center;
color: black;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Services</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Offers</a>
<div class="dropdown-content">
<a href="#">Exclusive</a>
<a href="#">Limited</a>
<a href="#">Unlimited</a>
</div>
</li>
</ul>
<h1>Hello Everyone</h1>
<h2>Dropdown Menu inside a Navigation Bar</h2>
<h3>place your cursor on the "offers" to see the dropdown effect.</h3>
</body>
</html> Vertical CSS Navigation Bar
Observe the following example to see how to build a vertical navigation bar.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: lightgray;
}
li a {
display: block;
color: blue;
font-size:20px;
padding: 8px 16px;
text-decoration: none;
}
.active{
background-color: black;
color: white;
}
li a:hover {
background-color: pink;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
<li><a href="#" class = "active">Home</a></li>
<li><a href = "#">About us</a></li>
<li><a href = "#">Programs</a></li>
<li><a href = "#">Services</a></li>
<li><a href = "#">Offers</a></li>
</ul>
</body>
</html> Observe the example below to see how we can align the links to the center and add borders between them.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: lightgray;
border: 1px solid blue;
}
li a {
display: block;
color: black;
font-size:20px;
padding: 10px 20px;
text-decoration: none;
border-bottom: 1px solid blue;
}
ul:last-child {
border-bottom: none;
}
.active{
background-color: black;
color: white;
}
li a:hover {
background-color: pink;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
<li><a href="#" class = "active">Home</a></li>
<li><a href = "#">About Us</a></li>
<li><a href = "#">Programs</a></li>
<li><a href = "#">Services</a></li>
<li><a href = "#">Offers</a></li>
</ul>
</body>
</html> Full-height Fixed Vertical Navbar
We can create the fixed full-height side navigation bar by using the properties height: 100%; and position: fixed;
Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: lightgreen;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
height:100%;
top:0;
width:150px;
overflow: auto;
background-color: lightgray;
border: 1px solid blue;
position: fixed;
}
li a {
display: block;
color: blue;
font-size:20px;
padding: 10px 20px;
text-decoration: none;
border-bottom: 1px solid blue;
}
.active{
background-color: black;
color: white;
}
li a:hover {
background-color: pink;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href = "#" class = "active">Home</a></li>
<li><a href = "#">About us</a></li>
<li><a href = "#">Programs</a></li>
<li><a href = "#">Services</a></li>
<li><a href = "#">Offers</a></li>
</ul>
<div style="margin-left:20%;padding-bottom:2000px;color:blue;">
<h1>Hello Everyone</h1>
<h2>Side navigation bar height: 100%; and position: fixed;</h2>
<h3>Scroll to the end, and see how the sidenav sticks to the page</h3>
</div>
</body>
</html> 
