<nav class="e-nav white fixed px-3">
  <label for="e-sidenav" class="e-btn small circle inverted mr-3"><i class="fas fa-bars"></i></label>
  <img src="./image.png" style="width:90px;height:auto;">
  <label for="e-menu" class="e-btn small circle inverted no-desktop"><i class="fas fa-th"></i></label>
  <input type="checkbox" id="e-menu">
  <div class="e-menu between">

    <i class="e-distribution"></i>

      <form style="width:100%;max-width:550px;">
        <div class="e-form-group unified no-m">
          <input type="search" placeholder="Search..." class="e-control small">
          <button type="button" class="e-btn small inverted px-1"><i class="fas fa-search"></i></button>
        </div>
      </form>

    <i class="e-distribution"></i>

      <a class="e-btn circle small inverted"><i class="fas fa-video"></i></a>
      <a class="e-btn circle small inverted no-mobile"><i class="fas fa-th"></i></a>
      <a class="e-btn circle small inverted"><i class="fas fa-camera"></i></a>
      <a class="e-btn circle small inverted"><i class="fas fa-bell"></i></a>
  </div>
</nav>

<!-- Sidenav -->
<input type="checkbox" id="e-sidenav">
<div class="e-cap cap-sidenav">
<div class="e-sidenav">

  <div class="sidenav-brand">
    <img src="./image.png">
  </div>

  <p class="sidenav-label">Explore</p>

  <a class="sidenav-item">
    Accessibility
  </a>
  <a class="sidenav-item">
    Arrows
  </a>
</div>
<!-- Layer of the body to hide again -->
<label for="e-sidenav" class="e-cap sidenav-hidden"></label>
</div>