Offcanvas collapse

basic.html

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-trigger="#main_nav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse" id="main_nav">
    <div class="offcanvas-header mt-3">  
      <button class="btn btn-outline-danger btn-close float-right"> &times Close </button>
      <h5 class="py-2 text-white">Main navbar</h5>
    </div>
    <ul class="navbar-nav">
      <li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
      <li class="nav-item"><a class="nav-link" href="#"> About </a></li>
      <li class="nav-item"><a class="nav-link" href="#"> Services </a></li>
    </ul>
  </div> <!-- navbar-collapse.// -->
</nav>

script.js

$("[data-trigger]").on("click", function(){
    var trigger_id =  $(this).attr('data-trigger');
    $(trigger_id).toggleClass("show");
    $('body').toggleClass("offcanvas-active");
});

// close button 
$(".btn-close").click(function(e){
    $(".navbar-collapse").removeClass("show");
    $("body").removeClass("offcanvas-active");
}); 

style.css

.offcanvas-header{ display:none; }

@media (max-width: 992px) {
  .offcanvas-header{ display:block; }
  .navbar-collapse {
    position: fixed;
    top:0; 
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: black;
    transition: visibility .2s ease-in-out, -webkit-transform .2s ease-in-out;
  }
  .navbar-collapse.show {
    visibility: visible;
    transform: translateX(-100%);
  }
}