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

Answer 2

You would need to add padding-top to the element after the fixed div to push it down.

JSFIddle Demo

BTW, IDs and classes cannot start with numbers...hence

HTML (partial)

<div id="menu">
    <nav>
        <p id="menus">
        <a class="menusor" href="#1">1</a>
        |
        <a class="menusor" href="#2">2</a>
        </p>
    </nav>
</div>
<div id="one"> etc...

CSS (partial)

nav {
    text-align:center;
    display:inline-block;
    background-color:#351b0e;
    width:70%;
    font-size:1.2em;
    padding-left:15%;
    padding-right:15%;
    position:fixed;
    top:0%;
    z-index:9999;
    margin-bottom:25%;
}

#one {
    padding-top:70px; (or some other value)
}