How to Create a Navigation Bar

A navigation bar helps users move easily between pages on your website. Learning to create a clean navbar is essential for web development beginners.

Basic HTML Navbar

<nav>
  <a href="index.html">Home</a>
  <a href="blog.html">Blog</a>
  <a href="about.html">About</a>
</nav>

Styling with CSS

nav {
  background-color: #111;
  padding: 10px;
  text-align: center;
}
nav a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
}
nav a:hover {
  text-decoration: underline;
}

Responsive Navbar

Use media queries to make the navbar mobile-friendly:

@media (max-width: 600px) {
  nav a {
    display: block;
    margin: 5px 0;
  }
}

A well-designed navbar improves navigation, user experience, and website professionalism.