# Stop Sticky Headers Covering Jump-Link Targets

> Leaves space above headings and sections when visitors follow a #link, so the target is not hidden under a sticky header or the admin bar.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: anchors, sticky, header, scroll
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-anchor-offset-sticky-header/

## Code

```css
:root {
    --wpide-header-offset: 90px;
}

html {
    scroll-padding-top: var(--wpide-header-offset);
}

.admin-bar {
    scroll-padding-top: calc(var(--wpide-header-offset) + var(--wp-admin--admin-bar--height, 32px));
}
```

## Notes

Set --wpide-header-offset to the height of your sticky header.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Stop Sticky Headers Covering Jump-Link Targets" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/