Keep Fixed Menu-bar from overlapping

Question

everyone!

I'm more or less designing a kind of prototype website. Just like other websites, I'm trying to have a menu-bar that is fixed in position, but doesn't overlap everything else I put on the screen. So, in essence, I'd like to have a 100% wide box (menu-bar) on top of another box (body of the webpage), which rests on the footer.

My code looks like this:

 <header>
   <nav>
     <ul>
       <a href="#"><li>Name</li></a>
       ...More list elements...
     </ul>
   </nav>
 </header>

 header{
   background-color:white;
   width:100%;
   padding:15px;
   border-bottom:1px solid black;
   position:fixed;
   margin-top:-25px;

 nav ul li{
   list-style-type:none;
   display:inline-block;
   padding:10px;
   margin-right:100px;
   font-family:Script MT, /*To make sure the font is displayable for you*/ Arial;
   font-size:20px;

Whenever I have anything in the rest of the document (I've put the menu-bar in the tags and tags), the menubar overlaps it, so it's not visible.

So the question is: How in the world do I get my menu-bar to stay fixed but not overlap everything else?

Answer 1

You need to offset the content by the height of your header, which means you need to give it a fixed height:

HTML:

<header>
  ...
</header>

<div class="content">
</div>

CSS:

header{
  ...
  height:50px;
}

.content{
  margin-top:50px    
}