In this CSS tutorial, we will be discussing how can we create navbars for a web-site. We will also be creating some Demo Navigation Bars vertically and Horizontally.
Navbars
Navbars stand for the navigation bar, and every web-site uses it so their users can navigate through the website major pages easily. in HTML5 we have the dedicated <nav> element for the navigation bar but using CSS we can provide styling to the <nav> element and make it look good and interactive.
List of Links in navbars
The navbar contains a list of links so when we style a navbar we also need to style the list type and links.
Create a Navbar
<!DOCTYPE html>
<html>
<head>
<style>
/*base style for nav bar*/
nav {
overflow: hidden;
background-color: black;
}
/*Styling navbar achor tags*/
nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*when user hover over the links*/
nav a:hover {
background-color: #87ceeb;
color: black;
}
/*Default style for navbar links*/
nav a.active {
background-color: #87ceeb;
color: white;
}
</style>
</head>
<body>
<nav>
<a class="active" href="#home">TechGeekBuzz</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#aboutus">About Us</a>
</nav>
</body>
</html>
Summary
- Navigation bars are used to present major links of the website.
- HTML5 has dedicated <nav> element for the navbars.