Anchor anchor for a fixed header, but keep the integrity of the perm

Added code for my WordPress to add anchor links to all headers h2

. In addition, it shows a small chain logo in front of each header when it is hovered.

This is how it looks:

This is my HTML markup:

<h2 id="contact">
  <a class="anchor" href="#contact">
    <i class="fa fa-link" title="Permalink"></i>
  </a>
  Contact us
</h2>

      

        
        
        
      

    

And this is the CSS:

h2 a.anchor {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -25px;
  padding: 0.75em 8px 0.75em 4px;    
  font-size: 18px;
  font-size: 1rem;
  line-height: 1;
  color: #CCCCCC;
  display: none;
}

h2:hover a.anchor {
  display: block;
}

      

        
        
        
      

    

However, my page has a fixed navigation title, so the anchor anchor requires a little offset. Otherwise my text content is hidden under a fixed heading.

I added this code to achieve offset:

h2:before {
  display: block;
  content: " ";
  height: 125px;
  margin-top: -125px;
  visibility: hidden;
}

      

        
        
        
      

    

Unfortunately, the chain logo moves up and is displayed 125 pixels above its original position. How can I get both logos in front of title and offset 125pxto deal with a fixed header?

My implementation is based on this article , which unfortunately doesn't work today.