Moving DOM Elements Below A Fixed Navigation Bar

I have a fixed navigation bar, however, any time I try to create content after it, the content clips the navigation. I could fix this by using relative positioning on the content,

Solution 1:

You can put nav inside a div , then set the height of the div by nav height. The advantage of this: easier and more meaningful,and In other places you can use other code without concerns..

<div class="nav-box">
    <nav>
        <ul>
            <li><a href="#">foo</a></li>
            <li><a href="#">bar</a></li>
        </ul>
    </nav>
</div>

EXAMPLE

Solution 2:

We should wrap the content after navigation in a div and set position:relative and top greater than the height of the navigation bar.

HTML CODE:
<nav>
   <ul>
     <li><a href="#">foo</a></li>
     <li><a href="#">bar</a></li>
   </ul>
</nav>

<div class="content">
   <section>foo</section>
   <p>bar</p>
   <h2>fubar</h2>
   <div>blah blah blah </div>
</div>

CSS CODE:
nav{
position:fixed;
top:0;
width:100%;
border:1px solid black;
}

nav ul li{
display:inline;
}

nav ul li a{
text-decoration:none;
color:black;
font-size:20px;
-webkit-transition:all .5s;
padding:5px;
}

nav ul li a:hover{
background:black;
color:white;
}
.content{
position:relative;
top:60px;
}