Offcanvas on mobile

basic.html

<b class="screen-overlay"></b>

<button data-trigger="#navbar_main" class="d-lg-none btn btn-warning" type="button">  Show navbar </button>

<nav id="navbar_main" class="mobile-offcanvas navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="offcanvas-header">  
    <button class="btn btn-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>
</nav>

script.js

$("[data-trigger]").on("click", function(e){
    e.preventDefault();
    e.stopPropagation();
    var offcanvas_id =  $(this).attr('data-trigger');
    $(offcanvas_id).toggleClass("show");
    $('body').toggleClass("offcanvas-active");
    $(".screen-overlay").toggleClass("show");
}); 

$(".btn-close, .screen-overlay").click(function(e){
    $(".screen-overlay").removeClass("show");
    $(".mobile-offcanvas").removeClass("show");
    $("body").removeClass("offcanvas-active");
}); 

style.css

.offcanvas-header{ display:none; }
.screen-overlay {
  height: 100%;
  z-index: 30;
  position: fixed;
  top: 0;
  left: 0;
  opacity:0;
  visibility:hidden;
  background-color: rgba(34, 34, 34, 0.6);
  transition:opacity .2s linear, visibility .1s, width 1s ease-in;
}
.screen-overlay.show {
  transition:opacity .5s ease, width 0s;
  opacity:1;
  width:100%;
  visibility:visible;
}
	
@media all and (max-width:992px) { 

 .offcanvas-header{ display:block; }
 
 .mobile-offcanvas{
    visibility: hidden;
    transform:translateX(-100%);
    border-radius:0; 
    display:block;
    position: fixed;
    top: 0; left:0;
    height: 100%;
    z-index: 1200;
    width:80%;
    overflow-y: scroll;
    overflow-x: hidden;
    transition: visibility .2s ease-in-out, transform .2s ease-in-out;
  }

  .mobile-offcanvas.show{
    visibility: visible;
    transform: translateX(0);
  }
}