Fixed 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.

Fixed Navbar

A fixed navbar stays at the top of the page even when the user scrolls down. It provides constant access to the navigation links.

<style>
   .fixed-navbar {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      position: fixed;
      top: 0;
      width: 100%;
   }

   .fixed-navbar li {
      float: left;
   }

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

   .fixed-navbar li a:hover {
      background-color: #111;
   }
</style>

<nav>
   <ul class="fixed-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>
<div class="content">
   <div id="home" class="content-section">
      <h2>Home</h2>
      <p>Welcome to our website! Here you'll find a variety of services that cater to your needs.</p>
   </div>

   <div id="services" class="content-section">
      <h2>Services</h2>
      <p>We offer a wide range of services to help you achieve your goals. Whether you're looking for web development, design, or marketing solutions, we've got you covered.</p>
      <p>Our team of experts is dedicated to providing top-notch services that are tailored to meet your specific requirements.</p>
   </div>

   <div id="about" class="content-section">
      <h2>About Us</h2>
      <p>We are a leading company in the industry with years of experience. Our mission is to deliver high-quality services that exceed our clients' expectations.</p>
      <p>Our team consists of talented professionals who are passionate about what they do and are committed to delivering the best results.</p>
   </div>

   <div id="contact" class="content-section">
      <h2>Contact Us</h2>
      <p>If you have any questions or would like to learn more about our services, please don't hesitate to contact us. We're here to help!</p>
      <p>You can reach us via email, phone, or through our online contact form. We look forward to hearing from you!</p>
   </div>
</div>

a navbar that remains fixed at the top of the page during scrolling.