fixed header above not fixed navbar - html

Question

So I have this markup:
<header>
<h1> Movy </h1>
<span class="tools" style='display: none'>
<button id='edit'>
<i class="fa fa-pencil"></i>
</button>
<button id='check'>
<i class="fa fa-check"></i>
</button>
<button id='trash'>
<i class="fa fa-trash-o"></i>
</button>
</span>
</header>
<nav id='nav'>
<ul class='navbar-nav'>
<li id='came-out'>Came Out</li>
<li class='active' id='coming-soon'>Coming Soon</li>
<li id='watched'>Watched</li>
</ul>
</nav>
...
And I want the header to be fixed, and the navbar to scroll.
So I added this to the CSS:
header {
position: fixed;
width: 100%;
z-index: 1000;
}
nav {
margin-top: 1em;
}
But the result is not what I wanted. I tried adding clear: both to every element but nothing has changed.
EDIT: This is how it should look like, but the header should be fixed.

Answer 1

You'll need to set the height of your header to a fixed height (in em or in px). Then add a padding top to your body with the same number.
body {
background: #e5e5e5;;
font-family: 'Roboto Condensed', 'Calibri', 'Arial', sans-serif;
margin: 0; padding: 0;
color: #444;
height: 2000px;
padding-top: 50px;
}
header {
background: #4285f4;
color: white;
padding: 12px;
padding-left: 15px;
position: fixed;
width: 100%;
z-index: 1000;
height: 26px;
margin: 0;
top: 0;
}
And take away the margin of the nav.
Check this Fiddle.

Answer 2

Add a wrapper div for your nav, and the rest of the page, and set a margin-top to clear the header div.
<header>
<h1> Movy </h1>
<span class="tools" style='display: none'>
<button id='edit'>
<i class="fa fa-pencil"></i>
</button>
<button id='check'>
<i class="fa fa-check"></i>
</button>
<button id='trash'>
<i class="fa fa-trash-o"></i>
</button>
</span>
</header>
<div id='wrapper'>
<nav id='nav'>
<ul class='navbar-nav'>
<li id='came-out'>Came Out</li>
<li class='active' id='coming-soon'>Coming Soon</li>
<li id='watched'>Watched</li>
</ul>
</nav>
</div>
CSS:
header {
position: fixed;
width: 100%;
z-index: 1000;
top:0;
}
.wrapper {
margin-top: 3em;
display:block;
}