How can I teach the bootstrap mobile menu to open on the right?

There is a menu bootstrap 4 in the mobile version of which I want to open the menu not as standard from the top, but it should go to the right with the content overlapping as here

There is an instruction for this example to connect the Off-canvas library specifically for Bootstrap 4, I do everything according to it, but for some reason it does not work.. What is wrong?

Code and fiddle 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/fitodac/bsnav/master/dist/bsnav.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/fitodac/bsnav/master/dist/bsnav.min.js"></script>
<div class="navbar navbar-expand-sm bsnav">
  <a class="navbar-brand" href="#">Navbar</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 active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
      <li class="nav-item"><a class="nav-link" href="#">News</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><a href="https://www.jqueryscript.net/gallery/">Gallery</a></a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</div>
Author: Вася, 2018-12-29
Source

1 answers

If by example, then there is added a small html code and css for it:

  <div class="bsnav-mobile">
    <div class="bsnav-mobile-overlay"></div>
    <div class="navbar"></div>
  </div>

All code:

.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);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/fitodac/bsnav/master/dist/bsnav.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/fitodac/bsnav/master/dist/bsnav.min.js"></script>
  
  <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>
 1
Author: HamSter, 2018-12-29 10:12:50