UNIT 24 • STAGE 6 OF 7

Fixed Header

position: fixed, z-index, and a CSS .scrolled state class

← Stage 5Unit 24Stage 7 →
UNIT 6 / 7
STEP 1

How position: fixed Works

position: fixed removes an element from normal document flow and pins it to the viewport; it stays in place as the page scrolls. You need three more properties to position it correctly:

  • top: 0, pins the top edge to the top of the viewport
  • left: 0, aligns the left edge to the left of the viewport
  • width: 100%, stretches the header to the full viewport width (fixed elements do not inherit their parent's width)
  • z-index: 1000, stacks the header on top of all other content

The .scrolled class on the header is a CSS hook. It exists in the CSS right now, but nothing applies it yet. In Stage 7, JavaScript will add and remove this class based on how far the user has scrolled.

STEP 2

Add the Header CSS

Add this before all other CSS, at the top of your <style> block (so it loads before any sections that might interact with it):

👉 Add header CSS: .site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 0;
  background: transparent;
  transition: background 0.3s, padding 0.3s;
}
.site-header.scrolled {
  background: var(--smoke);
  padding: 14px 0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.header-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; }
.site-logo { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--cream); text-decoration: none; }
.site-nav { display: flex; gap: 32px; list-style: none; }
.site-nav a { color: rgba(245,240,230,0.75); text-decoration: none; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; transition: color 0.2s; }
.site-nav a:hover { color: var(--cream); }

Also add padding-top: 160px to #hero to push the hero content down so it is not hidden behind the fixed header.

  • transition: background 0.3s, padding 0.3s, the header smoothly animates between its transparent and solid states. Without this, the background would snap instantly, which looks abrupt.
  • .site-header.scrolled, this CSS selector targets the header element only when it also has the scrolled class. Right now nothing adds that class; that is JavaScript's job in Stage 7.
  • box-shadow: 0 2px 20px rgba(0,0,0,0.4), adds a soft shadow below the solid header. This gives it visual depth and separates it from the content beneath.
STEP 3

Add the Header HTML

Add the header as the very first element inside <body>, before the hero section:

👉 Add at the top of <body>: <header class="site-header">
  <div class="header-inner">
    <a href="#" class="site-logo">Manoomin Kitchen</a>
    <nav>
      <ul class="site-nav">
        <li><a href="#menu">Menu</a></li>
        <li><a href="#about">Our Story</a></li>
        <li><a href="#reservations">Reserve</a></li>
      </ul>
    </nav>
  </div>
</header>

The header is transparent right now

Scroll in the preview; you will notice the header is there (you can see the logo and nav) but it stays transparent no matter how far you scroll. Stage 7 adds the JavaScript that detects the scroll position and toggles the .scrolled class.

Stage 6 Complete

You have a fixed header pinned to the top, with logo and nav links, transparent by default and ready for the scroll behavior.

Next: Stage 7, the last stage, adds the scroll event listener that makes the header transform.

Code Editor
Live Preview
Relentless Feather © 2026 Relentless Feather. All rights reserved.