Boostrap 4.3 Responsive Mobile Menu (left)

Live Preview

HTML

     <nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-sm-start fixed-top">
<div class="container-fluid">
  <a class="navbar-brand order-1 order-lg-0 ml-lg-0 ml-2 mr-auto" href="#">FrontendFunn</a>
  <button class="navbar-toggler align-self-start" type="button">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse bg-dark p-3 p-lg-0 mt-5 mt-lg-0 d-flex flex-column flex-lg-row flex-xl-row justify-content-lg-end mobileMenu" id="navbarSupportedContent">
    <ul class="navbar-nav align-self-stretch">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>     
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0 align-self-stretch">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>

</div>
</nav>
<div class="overlay"></div>

<div class="container mt-5 pt-2">
        <div class="row">
          <div class="col-md-12">
            <div class="alert bg-info my-3 d-none d-lg-block d-xl-block text-center text-white">
              Resize the Browser Window to see the effect
            </div>
          </div>
          <div class="col-md-12">
            <div class="alert bg-success my-3 text-center text-white">
              Please Like the video and Subscribe To Our Youtube Channel.
             <h6 class="text-center">A Like will be always appreciated</h6>
            </div>
          </div>
        </div>
      </div>

SCSS

@media (max-width: 992px) {
  .mobileMenu{
    transform: translateX(-100%);
    position: fixed;
    top:0px;
    bottom: 0;
    margin: auto;
    left: 0;
    transition: all ease 0.25s;
    &.open{
      transform: translateX(0%);
    }
    .navbar-nav{
      overflow-y: auto;
    }
  }
  .overlay{
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgba(0,0,0,0.5);
    display: none;
    &.open{
      display: block;
      z-index:1029;
    }
  }
}

CSS

@media (max-width: 992px) {
  .mobileMenu {
    transform: translateX(-100%);
    position: fixed;
    top: 0px;
    bottom: 0;
    margin: auto;
    left: 0;
    transition: all ease 0.25s;
  }
  .mobileMenu.open {
    transform: translateX(0%);
  }
  .mobileMenu .navbar-nav {
    overflow-y: auto;
  }

  .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
  }
  .overlay.open {
    display: block;
    z-index: 1029;
  }
}

JAVASCRIPT

$(document).ready(function(){
  var fixHeight = function(){
    $(".navbar-nav").css("max-height",document.documentElement.clientHeight -150);
  }
  fixHeight();
  $(window).resize(function(){
   fixHeight();
  });
  $(".navbar .navbar-toggler").on("click",function(){
    fixHeight();
  });
  $(".navbar-toggler, .overlay").on("click",function(){
    $(".mobileMenu, .overlay").toggleClass("open");
  });
});