Navbar is used to show a navigation bar on the top of the page.
Basic Navbar
<div class="navbar__wrapper flex--row">
<div class="navbar__container flex--row">
<a href="">
<div class="navbar__logo-container flex--row">
<img src="/assets/zodiaclogo.png" alt="logo image" class="navbar__logo-img" />
<h2 class="navbar__logo">Logo Name</h2>
</div>
</a>
<nav class="navbar__nav flex--row">
<ul>
<li><a href="">Option 1</a></li>
<li><a href="">option 2</a></li>
<li><a href="">option 3</a></li>
</ul>
</nav>
</div>
</div>
E-commerce Navbar
<div class="navbar__wrapper">
<div class="navbar__container flex--row">
<a href="">
<div class="navbar__logo-container flex--row">
<img src="/assets/zodiaclogo.png" alt="logo image" class="navbar__logo-img" />
<h2 class="navbar__logo">Logo Name</h2>
</div>
</a>
<div class="navbar__search-container flex--row">
<input type="text" class="navbar__search input__txt" placeholder="Search" />
<button class="navbar__search-btn btn"><span class="material-icons search__btn-icon">search</span></button>
</div>
<nav class="navbar__nav flex--row">
<ul>
<li><a href=""><span class="material-icons" title="View Cart">shopping_cart</span></a></li>
<li><a href=""><span class="material-icons" title="View Wishlist">favorite_border</span></a></li>
<li><a href=""><span class="material-icons" title="Account">account_circle</span></a></li>
</ul>
</nav>
</div>
</div>