Horizontal Navbar in CSS

A CSS Navbar (Navigation Bar) is a user interface element that typically contains links to various sections of a website. It's an essential part of a website's design, providing users with an easy way to navigate through different pages or content.

Navbars can be styled and positioned in various ways using CSS to create a seamless and visually appealing navigation experience.


Horizontal Navbar

A horizontal navbar displays the navigation links side by side in a row.

This is the most common type of navbar.

<style>
   .navbar {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
   }

   .navbar li {
      float: left;
   }

   .navbar li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
   }

   .navbar li a:hover {
      background-color: #111;
   }
</style>
<nav>
   <ul class="navbar">
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
   </ul>
</nav>

 the navbar is horizontal, with each link aligned side by side.