How to Create a Shrinking Header on Scroll Without JavaScript

Imagine a website header—substantial, generously padded. As you scroll, it elegantly compresses, reducing padding and maximizing screen space for content. Traditionally, JavaScript would handle this effect, but CSS's position: sticky offers a pure CSS solution.

While I generally prefer less screen-hogging sticky headers, their effectiveness depends entirely on your website's content and navigation. If used, prioritize avoiding content overlap—data loss is unacceptable.

Here's how to achieve this without JavaScript:

Markup: Simple—a parent <div> containing a child <code><div> for logo and navigation. <pre class="brush:php;toolbar:false">&lt;div class=&quot;header-outer&quot;&gt; &lt;div class=&quot;header-inner&quot;&gt;...&lt;/div&gt; &lt;/div&gt;</pre> <p><strong>CSS:</strong> The parent <code>.header-outer is styled as a flexible container, centered, and made sticky. A height is defined (120px).

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  top: -50px; /* Key: Negative top offset */
  height: 120px;
}

The inner container, .header-inner, represents the actual header (70px high), also sticky and positioned at the top (top: 0).

.header-inner {
  height: 70px;
  position: sticky;
  top: 0;
}

The magic? The parent's negative top offset (-50px) equals the height difference (120px - 70px). This positions the parent "above" the viewport, allowing the inner container to stick at the top. The parent slides out of view, leaving the inner header neatly in place.

This technique extends to other elements, such as persistent alerts.

Limitations: The fixed heights of the inner and outer containers are a constraint. Navigation wrapping (due to many menu items) can break the effect. Also, the logo remains static—a significant drawback as logos often consume considerable space. Ideally, future CSS enhancements would allow styling based on an element's sticky state.