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>

    CSS Navigation Bar summary

    1. Navigation bars are used to present major links of the website.
    2. HTML5 has dedicated <nav> element for the navbars.

    People are also reading: