Headers

Basic model

The Navigation Menu is basically composed of 2 elements: Right on the left and buttons on the right.

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

Container model

In this model, the content of the header is contained in a 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>

Image model

To insert an image in the header, just add the img object inside the classy logo object.

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

Fixed model

In this model, the header is attached to the top of the page. Just add the fixed class. Remembering that the content will have a new point 0 as a reference. In this case, you will need to add the wrap class to your parent element of your content. This class removes the contents from the top and fits perfectly into the fixed header.

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