Edit in JSFiddle

  <div class="navbar navbar-expand-sm bsnav"><a class="navbar-brand" href="#">bsnav</a>
    <button class="navbar-toggler toggler-spring"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse justify-content-sm-end">
      <ul class="navbar-nav navbar-mobile mr-0">
        <li class="nav-item nav-item-fill active"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item nav-item-fill"><a class="nav-link" href="#">About Us</a></li>
        <li class="nav-item nav-item-fill"><a class="nav-link" href="#">News</a></li>
        <li class="nav-item nav-item-fill"><a class="nav-link" href="#">Gallery</a></li>
        <li class="nav-item nav-item-fill"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
  
  <div class="bsnav-mobile">
    <div class="bsnav-mobile-overlay"></div>
    <div class="navbar"></div>
  </div>
.bsnav-mobile, .bsnav-mobile .bsnav-mobile-overlay, .bsnav-sticky.navbar-fade, .bsnav-sticky.navbar-slide {
    left: 0;
    position: fixed;
    top: 0;
    right: 0;
}


.bsnav-mobile {
    bottom: 0;
    z-index: 49;
    pointer-events: none;
}

.bsnav-mobile .navbar {
    background: #ccc !important; /* для наглядности */
  
    width: 230px;
    padding: 70px 0 15px;
    flex-flow: column;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    transition: .4s ease-in-out;
    transform: translate3d(300px,0,0);
    overflow: auto;
}

.bsnav-mobile.in .navbar {
    transform: translate3d(0,0,0);
}