Responsive Bootstrap 4 Menu

index.html

<header class="container">
  <div class="cusotm-nav-container d-flex align-items-center justify-content-between px-2 shadow-sm py-2">
    <a href="#" class="navbar-brand">
      <i class="fas fa-meteor d-flex text-clipped">
        <span class="m-auto">Meteor</span>
      </i>
    </a>

    <div class="main-nav-aside"></div>
    <div class="main-nav-outer d-flex">
      <i class="fas fa-times text-clipped menu-close-icon d-lg-none close-menu-icon"></i>
      <nav class="main-nav navbar navbar-light navbar-expand-lg text-center m-auto">
        <ul class="navbar-nav d-flex">
          <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Men</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Women</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Kids</a></li>
          <li class="nav-item"><a href="#" class="nav-link">New arrivals</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Sale</a></li>
        </ul>
      </nav>
    </div>

    <div class="nav-icons-container d-flex justify-content-between">
      <div class="nav-icons">
        <a href="#">
          <i class="fas fa-search text-clipped"></i>
        </a>
      </div>
      <div class="nav-icons">
        <a href="#">
          <i class="fas fa-shopping-bag bag-item-count text-clipped"></i>
          <span class="badge">4</span>
        </a>
      </div>
      <div class="nav-icons">
        <div class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <i class="text-clipped fas fa-user"></i>
        </a>
          <div class="dropdown-menu dropdown-menu-right">
            <form action="" class="p-2 text-secondary">
              <div class="form-group">
                <input type="email" class="form-control" placeholder="Email" required>
              </div>
              <div class="form-group">
                <input type="password" class="form-control" placeholder="Password" required>
              </div>
              <div class="form-check">
                <input id="dropdown-checkbox" type="checkbox" class="form-check-input">
                <label for="dropdown-checkbox" class="form-check-label">Remember ME</label>
              </div>
              <input type="submit" value="Submit" class="btn btn-bg">
            </form>
            <div class="dropdown-divider mt-0"></div>

            <a href="#" class="dropdown-item">Sign up</a>
            <a href="#" class="dropdown-item">Forgot password?</a>
          </div>
        </div>
      </div>
      <div class="nav-icons">
        <a href="#">
          <i class="fas fa-bars open-menu-icon text-clipped"></i>
        </a>
      </div>
    </div>

  </div>
</header>

responsive-bootstrap-4-menu.markdown

Responsive Bootstrap 4 Menu

A Pen by Programer on CodePen.

License.

script.js

// https://www.youtube.com/watch?v=dxxmyv6UO04&t=173s


// $(document).on("click", function(e) {
//   if($('.main-nav-outer').hasClass('open-menu')){
//     $(".main-nav-outer").removeClass('open-menu');
//   }
// })

$(".open-menu-icon").on("click", function() {
    $(".main-nav-outer").addClass("open-menu");
  $(".main-nav-aside").addClass("open");
});


$(".main-nav-aside").on("click", function() {
    $(".main-nav-outer").removeClass("open-menu");
  $(".main-nav-aside").removeClass("open");
});


$(".close-menu-icon").on("click", function() {
    $(".main-nav-outer").removeClass("open-menu");
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

style.css

.container {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: #6c757d;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

btn {
  /*    border: none;  */
  color: #6c757d;
}

.btn-bg {
  color: #fff;
  background: linear-gradient(to left, #23d5e3, #9149b9);
}

.btn-bg:hover {
  background: linear-gradient(to right, #23d5e3, #9149b9);
}

.text-clipped {
  padding: 1px;
  background: linear-gradient(to bottom, #23d5e3, #9149b9);
  -webwkit-background-clip: text;
  background-clip: text;
  -webwkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.custom-nav-container {
  position: relative;
  z-index: 1;
}

.main-nav-outer {
  width: 250px;
  height: 100vh;
  background-color: #fff;
  position: fixed;
  top: 0;
  right: -250px;
  border-left: 5px solid #eee;
  z-index: 1502;
  transition: 650ms all;
}

.main-nav-outer.open-menu {
  right: 0;
}

.menu-close-icon {
  position: absolute;
  top: 5px;
  left: 10px;
}

.main-nav .nav-link {
  font-size: 14px;
  text-transform: uppercase;
}

.nav-icons-container {
  width: 100%;
  max-width: 125px;
}

.nav-icons-container i {
  font-size: 20px;
  cursor: pointer;
}

.nav-icons-container i:hover {
  opacity: 0.7;
}

.navbar-brand i {
  font-size: 35px;
}

.navbar-brand i span {
  font-size: 25px;
  margin-left: 100px;
  font-weight: normal;
}

.nav-icons > a {
  position: relative;
}
.nav-icons > a .badge {
  position: absolute;
  top: -10px;
  right: -16px;
  background-color: #9149b9;
  color: #fff;
  border-radius: 100%;
}

.nav-icons .dropdown-menu {
  margin-top: 40px;
  margin-left: -220px;
  position: relative;
  background-color: #fff;
}

.nav-icons .dropdown-menu::before {
  position: absolute;
  content: "";
  top: -10px;
  right: 50px;
  width: 20px;
  height: 20px;
  background-color: inherit;
  border: inherit;
  transform: rotate(45deg);
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.dropdown-toggle::after {
  display: none;
}

.dropdown-item {
  color: #333;
}

main-nav-aside {
  transition: background 2s ease-in;
}

.main-nav-aside.open {
  position: absolute;
  content: "";
  width: calc(100% - 250px);
  top: 0;
  left: 0;
  bottom: 0;
}

@media screen and (min-width: 992px) {
  .main-nav-outer {
    height: initial;
    width: initial;
    position: initial;
    background-color: initial;
    border: none;
  }
  .nav-icons .dropdown-menu {
    margin-left: -230px;
  }

  .main-nav-aside {
    display: none;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet" />