Fix positioned menu bar covers elements that's linked to it

Question

I'm working on a static one paged website which has a fix positioned menu bar on the top. When I hit the links on the menu bar it goes down to the linked element and it covers it.

Here is a snippet from my html and css: Here is the fiddle fo shizzle my nizzles

nav {
    text-align:center;
    display:inline-block;
    width:70%;
    position:fixed;
       ...
}

How can I make it to act like a normal menu bar and not cover the linked elements?

Answer 1

I've faced a similer prob where i've used some jquery.

$('#linkId').click(function(){
    $('html, body').animate({ scrollTop: $('#toMove').offset().top });

});

but now in your case since the header is a fixed one i've done something and updated the same here in FIDDLE