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>
CSS Navigation Bar summary
- Navigation bars are used to present major links of the website.
- HTML5 has dedicated <nav> element for the navbars.
People are also reading: