Document fragmentation with fixed top navigation. How?

Question

css

Essence of the question: there is a page with text and a menu with links to paragraphs of this text. Example here: jsfiddle.net/zLeau0qz
The problem is that there is a fixed navigation menu at the top of the page. When you click on the links to the paragraphs of the text, the headings of these paragraphs are closed by the navigation menu. Is there a simple css + html solution?
UPD: Maybe somehow you can screw something like this, but more beautifully?

h2:target {
    padding-top: 40px;
}

Answer 1

I doubt very much that it will turn out more beautiful ... at least margin , at least padding .
But I will offer you something else:

• Make the menu bar barely visible through opacity (on hover - opaque).
  
• Place dimensionless elements after each subtext (on the last line) and make anchors on them.
  
• Use JavaScript:
  

  document.querySelector("aside").onclick = function(e){
    var tr = e.target.href;
    if(tr){
        e.preventDefault();
        window.scrollTo(
          0, 
          window.pageYOffset + document.querySelector("#"+tr.split("#")[1]).getBoundingClientRect().top - 60
         );
     }
  }

  
  Like this: jsfiddle.net/zLeau0qz/2
  

Answer 2

Add padding to list items and give them an ID