<nav class="nav">
  <ul>
    <li><a href="">Menu Items</a></li>
    <li><a href="">Will Drop</a></li>
    <li><a href="">Off</a></li>
    <li><a href="">The</a></li>
    <li><a href="">End</a></li>
    <li><a href="">of This Nav</a></li>
    <li><a href="">as Space</a></li>
    <li><a href="">Will Allow</a></li>
  </ul>
  <div class="x">&#9776;</div>
</nav>

html {
  background: #666;
}

body {
  width: 60%;
  margin: 0 auto;
  background: white;
}

.nav {
  position: relative;
  ul {
    display: flex;
    height: 3rem;
    overflow: hidden;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    width: 80%;
  }
  li {
    a {
      display: block;
      padding: 1rem 0.5rem;
      text-decoration: none;
      white-space: nowrap;
    }
  }
  &.open {
    ul {
      height: auto;
      display: block;
    }
  }
}
.x {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  cursor: pointer;
}

$(".x").on("click", function() {
  
  $(this).closest(".nav").toggleClass("open");
  
});