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>
Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus.