Page jumps with sticky menu

Hi,

How do I make page jumps with the sticky menu?
My html code works, but once I paste it in my wordpress site, the sticky menu gets in the way where i’m calling my id’s. So far I’ve tried:

– Placing it higher so it can display; but there are places I can’t reach.
– Using rows; but it creates space that I don’t want
– Using pseudo elements; works for the top id, but not for the other jumps.

You can find the html here:
http://codepen.io/anon/pen/GJMQzj.html

And the CSS part here:
http://codepen.io/anon/pen/GJMQzj.css

or the whole thing:

<style type="text/css">
h1:before { 
  display: block; 
  content: " "; 
  margin-top: -100px; 
  height: 100px; 
  visibility: hidden; 
}

</style>

<h1 id="top">Hash Links with Margin</h1>
<h2>Fixed Position Header aka the Sticky Menu</h2>
<ul>
<li><a href="#goto1">Jump 1</a></li>
<li><a href="#goto2">Jump 2</a></li>
<li><a href="#goto3">Jump 3</a></li>
<li><a href="#goto4">Jump 4</a></li>
</ul>



<h3 id="goto1">Header 1</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.


Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.


Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.


<a href="#top">Back</a>
<h3 id="goto2">Header 2</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.


Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.


Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.


<a href="#top">Back</a>
<h3 id="goto3">Header 3</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.


Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.


Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.


<a href="#top">Back</a>
<h3 id="goto4">Header 4</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.


Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.


Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.


Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.


Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.


<a href="#top">Back</a>

Any insight would be greatly appreciated.

Txs

URL: http://4d-smiles.com/623-2/