<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-md navbar-dark bg-primary mb-4"> <a class="navbar-brand" href="#">Off Canvas Navbar</a> <a href="#off-canvas" class="js-offcanvas-trigger navbar-toggle collapsed" data-toggle="collapse" data-offcanvas-trigger="off-canvas" aria-expanded="false"> <button class="navbar-toggler js-offcanvas-trigger" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" data-offcanvas-trigger="off-canvas"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse d-none" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline mt-2 mt-md-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <aside class="js-offcanvas" data-offcanvas-options='{ "modifiers": "left,overlay" }' id="off-canvas"> <ul class="list-unstyled"> <li> Customized content only shown on mobile off canvas view - Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li> </ul> </aside>

.c-offcanvas { left: 0; padding: 1rem; overflow-y: scroll; } .js-offcanvas a { color: #337ab7; outline: 0; } .js-offcanvas .dropdown-menu { position:relative; border:none; } ************** CHECK HERE MUST..........************** http://offcanvas.vasilis.co/examples.html

$(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready console.log("document is ready"); $(".navbar-nav").clone().prependTo("#off-canvas"); $(function() { $(document).trigger("enhance"); }); // document ready }); $(window).load(function() { // executes when complete page is fully loaded, including all frames, objects and images console.log("window is loaded"); // window load });