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>