← All posts

Tutorials

Remove sticky headers that cover content

17 May 2026 · by JustZix Team

Sticky headers were supposed to keep navigation handy. Too often they just stalk you down the page, swallowing a third of the screen and hiding the heading you just clicked to. Here is how to tame them with JustZix.

The two problems with sticky headers

First, they cost vertical space — on a laptop a fat sticky bar plus a sticky cookie strip can eat half the viewport. Second, they break anchor links: jump to a section and the heading lands behind the header, hidden. Both are pure CSS fixes.

Recipe 1: Unstick the header completely

If you do not need the navbar following you, the cleanest fix is to make it scroll away like normal content.

/* Make headers scroll away normally */
header, .site-header, .navbar,
[class*="sticky-header"], [class*="header-fixed"],
[style*="position: sticky"], [style*="position:fixed"] {
  position: static !important;
  top: auto !important;
}

This is the highest-impact rule in this post: you instantly get back the screen space and the header is still there at the top when you scroll up.

Recipe 2: Keep the header but fix anchor jumps

Maybe you like the sticky navbar and only hate that it covers headings after an anchor jump. The scroll-margin-top property tells the browser to leave room.

/* Stop the sticky header hiding anchor targets */
:target,
h1[id], h2[id], h3[id], h4[id] {
  scroll-margin-top: 90px !important;
}

Set the value to roughly the header's height. If headings still land too high or too low, adjust the 90px until anchored sections sit just below the bar.

Recipe 3: Shrink an oversized header

Some headers are sticky and huge. If you want to keep it pinned but reclaim space, cap its height and hide the bulky extras.

/* Slim down a bloated sticky header */
.site-header, header.sticky {
  max-height: 48px !important;
  overflow: hidden !important;
}

/* Drop secondary rows: search bars, promo strips */
.header-promo, .header-secondary,
.sub-nav, .announcement-bar {
  display: none !important;
}

Recipe 4: Hide the header until you scroll up

For a more polished result, hide the header while reading and reveal it only when you scroll up. This needs a small JS rule.

// Show the header only when scrolling up
let lastY = window.scrollY;
const bar = document.querySelector('header, .site-header, .navbar');

if (bar) {
  bar.style.transition = 'transform .2s ease';
  window.addEventListener('scroll', () => {
    const y = window.scrollY;
    bar.style.transform =
      (y > lastY && y > 200) ? 'translateY(-100%)' : 'translateY(0)';
    lastY = y;
  }, { passive: true });
}

Now the header tucks away as you read down and slides back the instant you scroll up — the behavior most sites should have shipped in the first place.

Do not forget the footer

Sticky footers and chat bubbles cause the same content-eating problem at the bottom of the screen. The same approach clears them:

/* Remove sticky footers and chat widgets */
.sticky-footer, [class*="cookie-bar"],
[class*="chat-widget"], [id*="intercom"],
[class*="floating-cta"] {
  display: none !important;
}

Pick the right recipe

• Want maximum space? Use Recipe 1.
• Like the navbar, hate the jumps? Use Recipe 2.
• Want a compromise? Combine Recipe 3 and 4.

Apply them per site, since header markup differs everywhere. JustZix keeps each site's rule separate so you can tune one without touching the rest.

Start reclaiming your screen

Install from the download JustZix page and browse the ready-made examples for more layout fixes. Sticky headers often share space with ad banners — clear those too with our guide at /en/blog/block-display-ads-with-css-rules.