CSS Navigation Bar

CSS Navigation Bar – Create Responsive Navbars with CSS

A navigation bar (navbar) is a critical part of web design, providing users with a way to navigate through the website. With CSS, you can style a navbar to make it functional, responsive, and visually appealing.

Basic HTML Structure for a Navbar

The navbar is typically created using a <nav> element with a list of links wrapped in <ul> and <li> tags.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Try It Now

Styling a Horizontal Navbar

CSS Code

nav {
  background-color: #333; /* Navbar background color */
  padding: 10px; /* Padding around the navbar */
}

nav ul {
  list-style: none; /* Remove bullet points */
  margin: 0;
  padding: 0;
  display: flex; /* Arrange items horizontally */
}

nav ul li {
  margin-right: 20px; /* Space between links */
}

nav ul li a {
  color: white; /* Link text color */
  text-decoration: none; /* Remove underline */
  font-size: 16px;
  padding: 5px 10px; /* Add padding to links */
  border-radius: 5px; /* Rounded corners */
}

nav ul li a:hover {
  background-color: #555; /* Change background on hover */
  color: #FFD700; /* Change text color on hover */
}

Try It Now

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Navbar</title>
  <style>
    nav {
      background-color: #333;
      padding: 10px;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
    }

    nav ul li {
      margin-right: 20px;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      font-size: 16px;
      padding: 5px 10px;
      border-radius: 5px;
    }

    nav ul li a:hover {
      background-color: #555;
      color: #FFD700;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Try It Now

Responsive Navbar

To make the navbar responsive, use media queries to adjust its layout on smaller screens.

CSS Code

@media (max-width: 600px) {
  nav ul {
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items */
  }

  nav ul li {
    margin: 10px 0; /* Add space between items */
  }
}

Try It Now

Adding Dropdown Menus

To include dropdown menus, you can use nested <ul> elements.

HTML Structure

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li>
      <a href="#services">Services</a>
      <ul>
        <li><a href="#web">Web Development</a></li>
        <li><a href="#design">Design</a></li>
        <li><a href="#seo">SEO</a></li>
      </ul>
    </li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Try It Now

CSS Code

nav ul li ul {
  display: none; /* Hide dropdown by default */
  position: absolute; /* Position it below the parent */
  background-color: #444; /* Dropdown background color */
  padding: 10px;
  list-style: none;
}

nav ul li:hover ul {
  display: block; /* Show dropdown on hover */
}

nav ul li ul li {
  margin: 5px 0; /* Space between dropdown items */
}

nav ul li ul li a {
  color: white;
  text-decoration: none;
}

nav ul li ul li a:hover {
  background-color: #555;
}

Best Practices for CSS Navbars

  1. Semantic HTML:
    • Use <nav> for navigation and <ul> for the list of links.
  2. Responsive Design:
    • Ensure the navbar works well on all screen sizes.
  3. Accessibility:
    • Add aria-label for the <nav> element if needed.
    • Use focus styles for keyboard navigation.
  4. Consistent Styling:
    • Keep the design consistent across the site.

Experiment with This Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navbar</title>
  <style>
    nav {
      background-color: #333;
      padding: 10px;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
    }

    nav ul li {
      margin-right: 20px;
      position: relative;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      padding: 5px 10px;
      border-radius: 5px;
    }

    nav ul li a:hover {
      background-color: #555;
      color: #FFD700;
    }

    nav ul li ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #444;
      padding: 10px;
      list-style: none;
    }

    nav ul li:hover ul {
      display: block;
    }

    nav ul li ul li {
      margin: 5px 0;
    }

    @media (max-width: 600px) {
      nav ul {
        flex-direction: column;
        align-items: center;
      }

      nav ul li {
        margin: 10px 0;
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li>
        <a href="#services">Services</a>
        <ul>
          <li><a href="#web">Web Development</a></li>
          <li><a href="#design">Design</a></li>
          <li><a href="#seo">SEO</a></li>
        </ul>
      </li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Try It Now

This example demonstrates a responsive navbar with dropdown functionality. Customize it to fit your design needs!