# Css so anchor links account for sticky nav bar

**URL:** <https://forum.ghost.org/t/css-so-anchor-links-account-for-sticky-nav-bar/51562>\
**Category:** Developer help\
**Created:** [October 10, 2024, 3:23pm UTC](https://forum.ghost.org/t/css-so-anchor-links-account-for-sticky-nav-bar/51562 "2024-10-10T15:23:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![fress](https://avatars.discourse-cdn.com/v4/letter/f/bb73d2/32.png) [@fress](https://forum.ghost.org/u/fress)\
**Post date:** [October 10, 2024, 3:23pm UTC](https://forum.ghost.org/t/css-so-anchor-links-account-for-sticky-nav-bar/51562/1 "2024-10-10T15:23:41Z")

</div>

the way that ghost handles anchor links is brilliant, but with a sticky nav bar the heading is hidden, which reduces the usefulness for the reader. Is there a small adjustment I can make to shunt the page down a few pixels to reveal the heading

---

<div class="post-metadata">

**Author:** ![herrfaust](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/herrfaust/32/41796_2.png) [@herrfaust](https://forum.ghost.org/u/herrfaust)\
**Post date:** [October 14, 2026, 9:54pm UTC](https://forum.ghost.org/t/css-so-anchor-links-account-for-sticky-nav-bar/51562/2 "2026-10-14T21:54:07Z")

</div>

For anyone who finds this later: one line of CSS fixes it. Settings - Code injection - Site header:

```html
<style>
  html { scroll-padding-top: 90px; } /* your header's height + a little air */
</style>

```

`scroll-padding-top` applies to every anchor jump and smooth scroll, so you don’t need a rule per heading. If the header’s height changes (it wraps on phones, or shrinks on scroll), set it from the real height instead, in Site footer:

```html
<script>
(function () {
  var h = document.querySelector('.gh-navigation, #gh-head, .gh-head, header');
  function set() { if (h) document.documentElement.style.scrollPaddingTop = (h.offsetHeight + 16) + 'px'; }
  set();
  window.addEventListener('resize', set);
})();
</script>

```