Cabeçalhos

Modelo básico

O Menu de navegação é composto basicamente por 2 elementos: Logo à esquerda e botões à direita.

<nav>
  <a class='logo' href="">Japu.css</a>
  <ul>
    <li><a href="">Btn 1</a></li>
    <li><a href="">Btn 2</a></li>
  </ul>
</nav>

Modelo container

Neste modelo, o conteúdo do cabeçalho está contido em um container.

<nav>
  <div class="container">
    <a class='logo' href="">Japu.css</a>
    <ul>
      <li><a href="">Btn 1</a></li>
      <li><a href="">Btn 2</a></li>
    </ul>
  </div>
</nav>

Modelo com imagem

Para inserir uma imagem no cabeçalho, basta acrescentar o objeto img dentro do objeto com classe logo.

<nav>
  <div class="container">
    <a class='logo' href="">
      <img src='images/japu.png'>
    </a>
    <ul>
      <li><a href="">Btn 1</a></li>
      <li><a href="">Btn 2</a></li>
    </ul>
  </div>
</nav>

Modelo fixo

Neste modelo, o header fica preso ao topo da página. Basta acrescentar a classe fixed. Lembrando que o conteúdo terá um novo ponto 0 como referência. Neste caso, você precisará acrescentar a classe wrap ao seu elemento pai do seu conteúdo. Esta classe afasta o conteúdo do topo e se encaixa perfeitamente no header fixo.

<nav class='fixed'>
    <a class='logo' href="">Japu.css</a>
    <ul>
      <li><a href="">Btn 1</a></li>
      <li><a href="">Btn 2</a></li>
    </ul>
</nav>
<div class="wrap"></div>