WordPress • CSS • Beginner • 5 minutes

Stop Anchor Links Hiding Behind a Sticky Header

Use scroll-padding-top to keep jump-link targets visible below a sticky header on desktop and mobile.

FREE • LAST VERIFIED: SEPTEMBER 28, 2026
The Problem

Stop Anchor Links Hiding Behind a Sticky Header

A table of contents or jump link scrolls to the right section, but its heading disappears behind the sticky navigation. Visitors land in the right place and still cannot see the answer.

The Fix

Give the document scroll area room for the header. CSS scroll-padding-top sets a comfortable landing position for native hash links, without moving the heading in the page layout.

1

Check your anchor

Give the target section or heading an ID such as pricing, then link to #pricing. Test once so you know the link itself works.

2

Add the CSS

In WordPress, open Appearance → Customize → Additional CSS (or your theme’s custom CSS area) and paste the snippet below. Divi users can use Divi → Theme Options → Custom CSS.

Divi Theme Options Custom CSS field on WP Build Notes; existing site CSS visible.
Where to add the CSS in Divi Theme Options. The screenshot shows existing site rules; paste the fix below them.
Copy this CSS
/* Adjust this number to the height of your sticky header. */
html {
  scroll-padding-top: 120px;
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 80px;
  }
}
3

Match your header height

Replace 120px with your desktop sticky header height plus a little breathing room. Replace 80px with the mobile value. Save and clear any page cache.

4

Test both sizes

Open a page with a jump link in a fresh tab, click it on desktop and mobile, and confirm the target heading remains visible. Try a direct URL ending in #pricing too.

Troubleshooting

The heading is still covered

Increase the offset. Measure the header while it is actually stuck, not only at the top of the page; sticky headers may change height.

Only some links work