Css so anchor links account for sticky nav bar

Developer help
1

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

2

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

<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:

<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>