CSS Navigation Bar

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>