Body overlaps fixed, horizontal nav bar up top - CSS/HTML

Question

I have to make a website for an assignment, and I'm having a bit of trouble. I've created a navbar up the top, and it's in a fixed position. However, when I scroll, everything shows through it. What I want, is essentially for the webpage to start under the navbar, so it's there at the top, and when I click 'About Me', it doesn't have the title under the navbar, like in the second image.

http://i.imgur.com/oTkXlWx.png

Does anyone know how to do this? Thanks.

#top-bar
    {   
        border-top:#fff dashed 1px;
        width:100%;
        height:32px;
        background:black;
        opacity:0.8;
        text-align:center;
        position:fixed;
        top:0;
        padding-bottom:12px;

    }

#top-nav li
{
    display: inline-block;
    line-height: 49px;
    padding: 0px 14px;


}

#top-nav li a
{
    display:block;
    color: #ddd;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

#top-nav li:hover, #top-nav li:hover a
{
    background-color:#333;
    color:#fff;
}

and the html:

    <nav id="top-bar">
        <ul id="top-nav">
            <li>
                <a href="#about-text">About Me</a>
            </li>

            <li>
                <a href="#programming-text">Programming</a>
            </li>

            <li>
                <a href="#home-text">Hometown</a>
            </li>

            <li>
                <a href="#swinburne-text">Swinburne</a>
            </li>

            <li>
                <a href="#achievement-text">Acheivements</a>
            </li>
        </ul>
    </nav>

Basically, I don't want the webpage to 'scroll through' the nav bar. Also, my class hasn't done javascript yet, so if there is a solution not using javascript that would be great.

Thanks guys.

PS Here is the code for the div for the about:

<div id="about-text" class="box">
    <h3>About Me</h3> 
    <p>My name is   , I'm 18 years old, and a Computer
    Science student at Swinburne University of Technology, Hawthorn.
    I've always been interested in computers, there is something
    beautiful about technology working to do so many things the human
    brain cannot possibly do.</p>
</div> 

and the css:

#about-text, #programming-text, #home-text, #achievement-text
{

    border-style : solid;
    border-width:0.2em;
    opacity:0.5;
    width : 70%;    
    transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;

}

Answer 1

I believe you simply need to give the .box es enough of a margin-top for it to clear the fixed navbar.

Update:

Discovered that the root cause of the issue was the use of in-page links, which always scrolled right to the top of the viewport (under the fixed nav) when clicked.

The best solution ended up being adding empty a elements before each div.box to use as the target of the links, and give those a large enough size that the .box would fall into place below the navbar:

<a href="#about-text" class="button"></a>
<div class="box"> ... </div>

.button {
    display: block;
    padding: 25px;
}

Answer 2

One trick that you can use is to put nav within the header tag and give background color for header, white or whichever color you are using. Scrolling down will go below the nav bar but it wont be seen due to the background color which overlaps it.