Moving DOM elements below a fixed navigation bar

Question

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

Answer 1

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:

   

     
foo
     
bar
   



   
foo
   
bar
   
fubar
   
blah blah blah 


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;
}