DEV Community

Supriya J
Supriya J

Posted on

Build a Simple Navigation Bar

Why Navbars Matter
They help visitors move around your site.

Let’s make a simple one.
HTML

<nav class="nav">
  <h2 class="logo">MySite</h2>
  <ul>
    <li>Home</li>
    <li>Products</li>
    <li>About</li>
  </ul>
</nav>

Enter fullscreen mode Exit fullscreen mode

CSS

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)