<nav class="nav-top p-3">
  <div class="container-fluid d-flex align-items-center no-padding">
    <h2 class="logo">LOGO</h2>
    <ul class="d-flex list-unstyled list list-top">
      <li><a href="">About</a></li>
      <li><a href="">Clients</a></li>
      <li><a href="">Projects</a></li>
      <li><a href="">Contact</a></li>
    </ul>
    <ul class="d-flex list-unstyled list ml-auto">
      <li><a href="">Facebook</a></li>
      <li><a href="">Twitter</a></li>
    </ul>
    <button class="toggle-menu ml-2 d-md-none" aria-label="Responsive Navigation Menu">
      <!--icon from https://iconmonstr.com-->
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/hamburger.svg" alt="">
    </button>
  </div>
</nav>

body {
  background-color: rgba(86,61,124,.05);
}

h2,
ul {
  margin: 0;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

.no-padding {
  padding: 0;
}

.nav-top {
  background: rgba(86, 61, 124, 0.15);
}

.container-fluid {
  max-width: 1200px;
}

.list-top {
  margin-left: 50px;
}

.list li:not(:last-child) {
  margin-right: 15px;
}

.list li a {
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.2s;
}

.list li a:hover {
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .list-top {
    position: absolute;
    /*equal to nav height, use JS to calculate nav height in case you don't explicitly define it in your CSS*/
    top: 70px;
    left: 0;
    right: 0;
    transform: translateX(-100%);
    margin-left: 0;
    padding: 1rem;
    transition: transform 0.3s;
  }

  .nav-top.is-active .list-top {
    transform: none;
  }

  .list-top li {
    flex-grow: 1;
  }
}

const toggleMenu = document.querySelector(".toggle-menu");
const navTop = document.querySelector(".nav-top");

toggleMenu.addEventListener("click", () => {
  navTop.classList.toggle("is-active");
});