Stop sticky headers covering headings

When a link jumps to a heading on the page (a table of contents, for example), the heading lands below your sticky header instead of behind it.

Type CSS (CSS)
Runs Public site, in the page head
Category Design
Tested with WordPress 7.1

CSS

html {
	scroll-padding-top: 100px;
}

Good to know

Set 100px to your header’s height plus a little space.

In these packs

Design touches: Small front-end touches: a reading progress bar, an announcement bar, a WhatsApp button, accessibility fixes.

Install it in one click

It's already in the Snipfire plugin's library. Enter your site's address and it opens there, ready to install. It arrives switched off, and Snipfire checks the code and test-loads your site before you switch it on.

Needs Snipfire on that site and you logged in as an administrator. Your address stays in this browser; we don't see it. Get Snipfire free

Or add it by hand

Click + New and choose CSS.
Paste the code and give it a name.
Where: Public site, in the page head.
Save and switch it on.

Works in any snippet plugin, or a child theme's functions.php. Without the safety net, though.

Good to know

In these packs

More Design snippets

Move your snippets over this afternoon.