Static header (including NAV and other DIVs)

Question

I am trying to create a static header that doesn't move when scrolling the page (below HTML).

<header id="header">

<div class="nav-menu" id="mynav">
  <div id="nav-menu-container">
    <ul>
      <li class="menu-active">home</li>
      <li><a href="blog.html">blog</a></li>
      <li><a href="books.html">books</a></li>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </ul>
  </div>
</div>

<div id="scene">
  <div id="animation"></div>

</div>
  </header>

<main>
</main>

I have tried adding the below CSS. This makes the header static, but, it pushes it to the top left of the browser. Therefore, the content inside the main tag starts at the top-middle of the browser.

#header{
position: fixed;
top: 0;
z-index:1;}

Like this:

|Header||Main|

Instead of:

|Header|

|Main|

JSFIDDLE https://jsfiddle.net/dy8gaL4j/1/

How can I make the header stay at the top (above the main tag) whilst also being static - only the main content will scroll.

Thanks

Answer 1

I hope I understood what you want, so if this is not the right solution, please let me know. I suppose you want fixed full-width header with scrollable body bellow. I would try to add left and right parameters and set them to 0, and then position body content a bit bellow it (you'll have to adjust margin-top value). Here is my example

#header{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index:1;
background: #aaa;
}

main{
  margin-top: 120px;
}

<header id="header">

<div class="nav-menu" id="mynav">
  <div id="nav-menu-container">
    <ul>
      <li class="menu-active">home</li>
      <li><a href="blog.html">blog</a></li>
      <li><a href="books.html">books</a></li>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </ul>
  </div>
</div>

<div id="scene">
  <div id="animation"></div>

</div>
  </header>

<main>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
line of text <br>
</main>