How to make sticky header in css

CssHow-ToBeginner · 3 min read

How to Make a Sticky Header in CSS: Simple Guide

To make a sticky header in CSS, use position: sticky; along with top: 0; on the header element. This keeps the header fixed at the top of the viewport when you scroll down the page.

📐

Syntax

The basic syntax to create a sticky header uses the position property set to sticky and the top property to define the offset from the viewport's top edge.

position: sticky; makes the element stick when scrolling.
top: 0; keeps the element at the very top of the viewport.
Make sure the parent container does not have overflow: hidden; or similar, or sticky won't work.

css

header {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1000; /* keeps header above other content */
}

💻

Example

This example shows a simple sticky header that stays visible at the top as you scroll down the page.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sticky Header Example</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  header {
    position: sticky;
    top: 0;
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    font-size: 1.5rem;
    z-index: 1000;
  }
  main {
    height: 2000px; /* to enable scrolling */
    padding: 1rem;
    background: linear-gradient(white, lightgray);
  }
</style>
</head>
<body>
<header>Sticky Header</header>
<main>
  <p>Scroll down to see the header stay fixed at the top.</p>
</main>
</body>
</html>

Output

A green header bar with white text 'Sticky Header' stays fixed at the top while the page content scrolls underneath.

⚠️

Common Pitfalls

Sticky headers may not work if:

The parent container has overflow: hidden;, overflow: scroll;, or overflow: auto;. This clips the sticky behavior.
You forget to set top property, so the element won't know where to stick.
The element has position: fixed; instead of sticky, which behaves differently.
The z-index is too low, causing the header to be hidden behind other elements.

Example of wrong and right usage:

css

/* Wrong: parent has overflow hidden */
.parent {
  overflow: hidden;
}
header {
  position: sticky;
  top: 0;
}

/* Right: remove overflow or set to visible */
.parent {
  overflow: visible;
}
header {
  position: sticky;
  top: 0;
  z-index: 10;
}

📊

Quick Reference

Tips for sticky headers:

Use position: sticky; and top: 0; on the header.
Ensure no parent container clips overflow.
Set a background color and z-index to keep header visible.
Test on different browsers; sticky is widely supported but check older versions.

✅

Key Takeaways

Use position: sticky; with top: 0; to make headers stick at the top.

Avoid parent containers with overflow: hidden; as it breaks sticky behavior.

Add z-index and background color to keep the header visible above content.

Sticky headers improve navigation by staying accessible during scrolling.

Test sticky headers on multiple browsers for consistent behavior.