How to create a navigation bar with CSS?
The navigation bar is added to the webpage to navigate between the pages of the websites. The navbar consists of a list of horizontal links, search boxes, etc. In this tutorial, we will be learning to style navbar elements with CSS.
Styling the navbar
Here is the list of CSS properties that can be used to create a navbar.
background-color: It is used to add background color to the navbar.overflow : The overflowing content can be discarded using hidden value to the overflow.float : The float is used to float the elements within the navbar. Use left to float an element to left and right to float an element to right.padding: It is used to add padding to the navbar elements.hover: The :hover pseudo class is used to add the hover effect to the navbar.color: It is used to add color to the navbar elements.
Example: Create a horizontal navbar using CSS
Here, we have created a horizontal navigation bar using CSS properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<style>
/* Add a black background color to the top navigation */
.navbar {
background-color: #CCCCCC;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
color: #f1f2f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #d34567;
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #d43565;
color: white;
}
</style>
</head>
<body>
<div class="navbar">
<a class="active" href="#">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
<h2> Here we have successfully added a navbar </h2>
</body>
</html>
Output
Here is the output of the above program.
Example: Create a vertical navigation bar
To create a side navigation bar, we need to style <a> elements inside the list. We will use the same CSS properties as mentioned above.
Conclusion
We can easily create a horizontal navbar or vertical navbar using CSS properties. We need to combine a set of properties to properly style the elements in the navbar. We can style the navbar in multiple ways using CSS properties.
