Navigation

Navigation can be used to give the user facility to navigate between different pages.

Desktop Variation One

                    
<div class="navbar-container">
  <nav class="navbar-align px-2 py-1">
    <div class="navbar-align">
      <img loading="lazy" class="img-brand-logo" src="..." alt="..." />

      <a
        class="brand-name"
        href="https://inclusive-mart.netlify.app"
        target="_blank"
      >
        <span>Inclusive</span>
        <span class="mart-text">Mart</span>
      </a>
    </div>

    <form class="navbar-form">
      <input type="text" placeholder="search for product" />
      <button type="submit">
        <i class="fas fa-search"></i>
      </button>
    </form>

    <div class="navbar-align">
      <button class="navbar-btn-log translate-y">Log In</button>

      <a href="#" class="badge-btn mx-2 text-white translate-y">
        <i class="fas fa-heart"></i>
        <span class="badge-count bg-red-500">0</span>
      </a>

      <a href="#" class="badge-btn mr-1 text-white translate-y">
        <i class="fas fa-shopping-cart"></i>
        <span class="badge-count bg-red-500">0</span>
      </a>
    </div>
  </nav>

  <div class="navbar-md-container">
    <form class="navbar-form">
      <input type="text" placeholder="search for product" />
      <button type="submit">
        <i class="fas fa-search"></i>
      </button>
    </form>
    <button class="navbar-btn-log translate-y">Log In</button>
  </div>
</div>

Mobile Variation One

You can resize the browser width to see the hamburger in action. It will become visible at 576px width.

                    
<div class="navbar-container">
  <nav class="navbar-align px-2 py-1">
    <div class="navbar-align">
      <img loading="lazy" class="img-brand-logo" src="..." alt="..." />

      <a
        class="brand-name"
        href="https://inclusive-mart.netlify.app"
        target="_blank"
      >
        <span>Inclusive</span>
        <span class="mart-text">Mart</span>
      </a>
    </div>

    <form class="navbar-form">
      <input type="text" placeholder="search for product" />
      <button type="submit">
        <i class="fas fa-search"></i>
      </button>
    </form>

    <div class="navbar-align navbar-sm">
      <button class="navbar-btn-log translate-y">Log In</button>

      <a href="#" class="badge-btn mx-2 text-white translate-y">
        <i class="fas fa-heart"></i>
        <span class="badge-count bg-red-500">0</span>
      </a>

      <a href="#" class="badge-btn mr-1 text-white translate-y">
        <i class="fas fa-shopping-cart"></i>
        <span class="badge-count bg-red-500">0</span>
      </a>
    </div>

    <div class="navbar-sm-container relative">
      <button class="btn-sm-navbar translate-y">
        <i class="fas fa-bars"></i>
        <i class="fas fa-times d-none"></i>
      </button>

      <ul class="d-none navbar-sm-list">
        <li class="my-1">
          <a class="translate-y" href="#">
            <i class="fas fa-heart mx-0p5"></i> Wishlist
          </a>
        </li>
        <li class="my-1">
          <a class="translate-y" href="#">
            <i class="fas fa-shopping-cart mx-0p5"></i> Cart
          </a>
        </li>
        <li class="my-1">
          <a class="translate-y" href="#">
            <i class="fas fa-door-open mx-0p5"></i> Log In
          </a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="navbar-md-container navbar-sm">
    <form class="navbar-form">
      <input type="text" placeholder="search for product" />
      <button type="submit">
        <i class="fas fa-search"></i>
      </button>
    </form>
    <button class="navbar-btn-log translate-y">Log In</button>
  </div>
</div>