<section class="bg-primary">
  <div class="container">


<!--  START NAVBAR   -->
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-offcanvas">
      <a class="navbar-brand mr-auto" href="#">Offcanvas navbar - toggle always visible</a>
      
<!--     If you want to show the button online on mobile use this toggle   
      
      <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
        <span class="navbar-toggler-icon"></span>
      </button>

-->
      
<!--      This toggle button is always visible  -->
     <button class="navbar-toggler d-block" type="button" id="navToggle">
      <span class="navbar-toggler-icon"></span>
    </button>

      <div class="navbar-collapse offcanvas-collapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Notifications</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Switch account</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
 
        
      </div>
    </nav>
<!--  END NAVBAR   -->

  </div>
  <!--/.container    -->

</section>


<section>
  <div class="container py-3">
    This demo is a remix of the <a href="http://getbootstrap.com/docs/4.1/examples/offcanvas/">off canvas example</a>  on the Bootstrap 4 documentation.
  </div>
</section>


html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

/* since the navbar is fixed we need to add some space to the body */
body {
  padding-top: 56px;
}




  .offcanvas-collapse {
    position: fixed;
    top: 56px; /* Height of navbar */
    bottom: 0;
    right: 100%;
    left:-300px;
    width: 300px;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition-timing-function: ease-in-out;
    transition-duration: .3s;
    transition-property: left, visibility;
  }

  .offcanvas-collapse {
      align-items:start;
/*   Adds a subtle drop shadow   */
    			-moz-background-clip: padding;     /* Firefox 3.6 */
			-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
			background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
    border-right:5px solid rgba(0, 0, 0, 0.2);
    
  }




/* Makes the nav visibile with the open class */
  .offcanvas-collapse.open {
    left: 0;
    visibility: visible;
  }


.navbar-expand-lg .navbar-nav {
    -ms-flex-direction: column;
    flex-direction: column;
}


.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}




$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
  
  
    $('[data-toggle="offcanvas"], #navToggle').on('click', function () {
    $('.offcanvas-collapse').toggleClass('open')
  })
  
  
// document ready  
});


window.onload = function() {
 // executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
  
  
// window load  
};


External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/504729ba/bootstrap-4-latest.min.js