Creating a Sticky Header with Pure CSS

Learn how to create a sticky header using only CSS. Improve site navigation with this simple, modern web development technique—no JavaScript required!


Back to Home

Table of content

Introduction

Sticky headers are everywhere in modern web design. They help keep your main navigation visible as users scroll down the page, improving usability and keeping your content accessible. In this article, we’ll explore how to create a sticky header using just CSS—no JavaScript necessary. It’s simple, efficient, and works in all modern browsers!

What is a Sticky Header?

A sticky header is a section (usually the top navigation bar) that stays fixed at the top of the browser window as you scroll. This ensures that navigation options or important messages are always visible.

Why Use Pure CSS for Sticky Headers?

  • Performance: No JavaScript means faster load times and improved site speed.
  • Simplicity: Less code, easier to maintain.
  • Compatibility: CSS position: sticky is supported in all major browsers.

The Basics: position: sticky

The cornerstone of a CSS-only sticky header is the position: sticky property. Unlike position: fixed, which always pins the element, sticky transitions the element from relative to fixed based on your scroll position.

header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

Step-by-Step: Creating a Sticky Header

1. Create the Header Markup

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

2. Add Base Styles

header {
  padding: 1rem 2rem;
  background: #fff;
  border-bottom: 1px solid #eee;
}
nav a {
  margin-right: 1.5rem;
  text-decoration: none;
  color: #222;
}

3. Make the Header Sticky

Now, apply the position: sticky property to your header. Set top: 0; to keep it at the top.

header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

4. Add an Example Page Structure

<body>
  <header>...</header>
  <main>
    <section>Lots of page content...</section>
    <section>...scroll down and header stays!</section>
  </main>
</body>

Tips for Perfect Sticky Headers

  • Always test on all devices and browsers for compatibility.
  • Make sure the z-index value is high enough to stay on top of other elements.
  • Use a background color and subtle shadow for better visibility and separation.
  • Avoid making your sticky header too tall—save screen space for content.

Troubleshooting Common Issues

  • Sticky not working? Ensure the header’s parent element doesn’t have overflow: hidden or overflow: auto. Sticky only works properly if the ancestor’s overflow is visible (the default).
  • Jumping or overlapping content? Double-check your layout and add top padding to your content if necessary.

Conclusion

With just a few lines of CSS, you can add a sticky header to your website, enhancing navigation and keeping important links accessible for your users. Experiment with styles and transitions to make your sticky header shine!

CSS
css tips
Frontend
Sticky Header
Web Development