Navbar — horizontal navigation bar

Logo on the left, links on the right. Sticky at the top. The most common UI element.

style.css v3.1

style.css — the CSS rules

.navbar {
  background: #1a1a1a;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.navbar .logo {
  color: #a0c000;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}

.navbar ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
}

.navbar ul li a {
  color: #ccc;
  text-decoration: none;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  transition: all 0.15s;
  display: block;
}

.navbar ul li a:hover {
  color: white;
  background: rgba(255,255,255,0.1);
}

.navbar ul li a.active {
  color: #a0c000;
  background: rgba(160,192,0,0.15);
}

index.html — the HTML structure (what the CSS targets)

<nav class="navbar">
  <a href="#" class="logo">MyApp</a>
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Models</a></li>
    <li><a href="#">Datasets</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>
<div style="padding: 2rem;">
  <p>Scroll down — the navbar sticks to the top.</p>
  <p style="margin-top: 50vh;">You scrolled!</p>
</div>

Live preview updates as you type

🧠 How it works

display: flex + justify-content: space-between pushes logo left, links right. position: sticky + top: 0 — the navbar stays at the top when you scroll. Unlike fixed, it takes up space in the flow. z-index: 100 — navbar stays above other content. The ul is also a flex container (display: flex) so the li items sit in a row. gap: 0.5rem — space between links (modern alternative to margin-right on each li). transition: all 0.15s on the links — hover color/background fades in smoothly. active class — marks the current page. Use it in your templates: <a class="active">Home</a>.

✏️ Try these changes

Change position: sticky to position: fixed
→ navbar floats over content — content slides under it (need padding-top on body)
Change justify-content: space-between to center
→ logo and links center together
Change background: #1a1a1a to #a0c000
→ navbar becomes green
Change .navbar ul li a padding to 0.8rem 2rem
→ links become wider
Remove the box-shadow
→ navbar loses its depth separator

← Previous lab

Full page layout — header + sidebar + main + footer

Next lab →

Responsive card grid — auto-fit