Develop With Faith
September 26, 2026

The One CSS Line That Fixes Every Anchor Link on a Church Website With a Sticky Header

You have almost certainly seen this on your own church site. Someone taps a jump link — "Plan Your Visit," "Watch Live," "What We Believe" — the page slides to the section, and the section title is neatly hidden under the sticky header at the top. What the visitor sees is the second paragraph. They have no idea they arrived at the right place.

For years the fixes were ugly. An invisible spacer element above the heading. A JavaScript scroll offset. A negative margin plus padding trick that broke as soon as the design changed. All of it fragile, all of it something to remember every time you added a new section.

The right fix has been in every major browser for a while now, and it is one line.

:target,
[id] {
  scroll-margin-top: 6rem;
}

scroll-margin-top tells the browser: when you scroll to this element because of a link or focus, pretend there is this much space above it. The element itself does not move. The scroll just stops that many pixels earlier, so the heading clears the sticky bar and lands where a visitor expects it.

Set the value to the height of your sticky header, plus a little breathing room. If your header is 80 pixels, 5rem or 6rem is a safe home. If the header changes size at a breakpoint, you can change the value in the same media query.

Where it earns its keep on a ministry site: the anchor links on a long "Plan Your Visit" page, the section jumps on a beliefs or staff page, the "back to top" link on a sermon archive, and any button that scrolls to a form further down the page. Every one of those benefits without a single JavaScript listener.

A few small notes. Apply it broadly, not just to headings — any element with an id can be a scroll target, and the property is inherited nowhere, so it is safest as a rule on [id]. If your header hides on scroll-down and returns on scroll-up, pick the value for when the header is visible; a small overshoot when it is hidden is harmless.

None of this is a feature a visitor will notice. It is one of those small quiet things that removes a moment of confusion they would not have been able to name. If your church site has a few of these little navigation stumbles you have never gotten around to fixing, we would be glad to take a look.

← Back to all posts