Navigation
Navigation is important part of any website
simple navigation
<header class="header">
<h1 class="header-logo"><a href="#">Logo</a></h1>
<ul class="header-nav">
<li><a href="#"> Home </a></li>
<li><a href="#"> About </a></li>
<li><a href="#"> Contact </a></li>
</ul>
</header>
Navigation with Button
<header class="header">
<h1 class="header-logo"><a href="#">Logo</a></h1>
<ul class="header-nav">
<li>
<button class="header-btn">
<a href="#">Login</a>
</button>
</li>
</ul>
</header>
Navigation with Icon
<header class="header">
<h1 class="header-logo"><a href="#">Logo</a></h1>
<ul class="header-nav">
<li><a href="#"> Home </a></li>
<li><a href="#" class="badge"><i class="far fa-cart-arrow-down header-icon"> <div class="badge-number header-number">0</div> </i></a></li>
</ul>
</header>
Navigation with Search bar
<header class="header">
<h1 class="header-logo"><a href="#">Logo</a></h1>
<div class="header-search">
<input type="text" class="header-input field-item" placeholder="Search">
<div class="error-icon header-error-icon"><i class="fas fa-search input-error-icon header-search-icon"></i></div>
</div>
<ul class="header-nav">
<li><a href="#"> Home </a></li>
<li><a href="#" class="badge"><i class="far fa-cart-arrow-down header-icon"> <div class="badge-number header-number">0</div> </i></a></li>
<li><a href="#"> Login </a></li>
</ul>
</header>