They define useful links so that we can browse web page smoothly. We provide you with three basic types of navigation bars that are responsive as well.
Basic Navbar. Copy the code in you header.
<nav class="navigation">
<div class="navigation__wrapper flex__temp">
<ul class="navigation__list navigation__list--one flex__temp">
<li class="navigation__item navigation__item--links">Home</li>
<li class="navigation__item navigation__item--links">About</li>
<li class="navigation__item navigation__item--links">Contact</li>
</ul>
<ul class="navigation__list flex__temp">
<li class="navigation__item">Sign In</li>
<li class="navigation__item navigation__item--btn">Sign Up</li>
</ul>
</div>
</nav>
Here you can give your brand identity using a logo. Replace logo with yours.
<nav class="navigation">
<div class="navigation__wrapper flex__temp">
<ul class="navigation__list">
<li class="logo navigation__item">Logo</li>
</ul>
<ul class="navigation__list navigation__list--one navigation__hide flex__temp">
<li class="navigation__item navigation__item--links">Home</li>
<li class="navigation__item navigation__item--links">About</li>
<li class="navigation__item navigation__item--links">Contact</li>
</ul>
<ul class="navigation__list flex__temp navigation--forms">
<li class="navigation__item">Sign In</li>
<li class="navigation__item navigation__item--btn">Sign Up</li>
</ul>
</div>
</nav>
A little dynamic types of navbar.
<nav class="navigation">
<div class="navigation__wrapper flex__temp">
<ul class="navigation__list">
<li class="logo navigation__item">Logo</li>
</ul>
<ul class="navigation__list navigation__list--center navigation__hide flex__temp">
<li class="navigation__item navigation__item--links">Home</li>
<li class="navigation__item navigation__item--links">About</li>
<li class="navigation__item navigation__item--links">Contact</li>
</ul>
<ul class="navigation__list flex__temp navigation--forms">
<li class="navigation__item">Sign In</li>
<li class="navigation__item navigation__item--btn">Sign Up</li>
</ul>
</div>
</nav>