Building the Portfolio with HTML and CSSLesson 2.3

How to build a responsive navigation bar with CSS

sticky navigation, flexbox nav layout, space-between, smooth scroll, anchor links, mobile hamburger concept, z-index, backdrop filter

A Navigation Bar That Stays Useful

Your navigation has one job: let visitors jump to any section instantly. Keep it minimal — your name on the left, anchor links on the right.

HTML Structure

<header>
  <nav class="navbar">
    <a href="#hero" class="nav-logo">Jane Doe</a>
    <ul class="nav-links">
      <li><a href="#projects">Projects</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

Sticky Navigation CSS

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  z-index: 100;
  border-bottom: 1px solid #e5e7eb;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

position: sticky; top: 0 keeps the nav visible as the user scrolls. backdrop-filter: blur(8px) with a semi-transparent background looks clean over any content below. scroll-behavior: smooth on html makes anchor link clicks animate instead of jump.

For mobile, hide the nav links and add a hamburger icon toggle using JavaScript — covered in Module 3.