Offset the HTML anchor to adjust for the sticky header

In the new Blogger templates, they heavily feature a sticky header, or a fixed header, which follows you down the page once you're past the title page.

This header can get in the way when linking to anchors (fragments) in your pages, since the browser will use the anchor's position in the page when it jumps down to the content.

To counter this issue, we can add a little negative-margin, positive padding CSS hack to the :target anchor.

Example header

If you click the get link icon (the icon) above, you'll see how it jumps a little above the header.

*:target:before { 
  display: block; 
  content: " "; 
  height: 65px;
  margin-top: -65px;
  visibility: hidden; 
}

To apply this style to your blog, head to:
blogger.com => (Your blog) => Theme => Customize => Advanced => Add CSS
and add it to the text area, and save.


Happy anchoring!