<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <b class="screen-overlay"></b> <nav class="navbar2 navbar d-lg-none fixed-top navbar-expand-lg navbar-light"> <div class="container"> <button data-trigger="#navbar_main" class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button> <a class="navbar-brand mx-auto" href="#">Navbar</a> </div> </nav> <!-- d-lg-none --> <nav id="navbar_main" class="mobile-offcanvas navbar fixed-top navbar-expand-lg navbar-light"> <div class="container nav-cont"> <a class="navbar-brand d-none d-lg-block" href="#">Navbar</a> <div class="offcanvas-header"> <button class="navbar-toggler btn-close"><span class="navbar-toggler-icon"></span></button> <!-- <h5 class="py-2 mx-auto text-white d-inline mx-auto">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> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> More items </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#"> Submenu item 1</a></li> <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li> </ul> </li> </ul> </div> </nav> <br><br>

body.offcanvas-active { overflow: hidden; } .navbar { box-shadow: -1px 4px 15px #0000006e; } .offcanvas-header { display: none; } .screen-overlay { width: 0%; 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 0.2s linear, visibility 0.1s, width 1s ease-in; } .screen-overlay.show { transition: opacity 0.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 0.2s ease-in-out, transform 0.2s ease-in-out; background-color: #fff !important; } html:lang(ar) .mobile-offcanvas { transform: translateX(100%); } .mobile-offcanvas.show { visibility: visible; transform: translateX(0); } .nav-cont { display: block !important; padding-right: auto !important; padding-left: auto !important; } .navbar2 { box-shadow: 0px 3px 17px #00000047; } #navbar_main { box-shadow: 0px 3px 17px #00000047; } .dropdown-menu { border: none; } .nav-item { border-bottom: 1px solid #eaeaea; } }

/// some script // jquery ready start $(document).ready(function () { // jQuery code $("[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"); }); // Close menu when pressing ESC $(document).on("keydown", function (event) { if (event.keyCode === 27) { $(".mobile-offcanvas").removeClass("show"); $("body").removeClass("overlay-active"); } }); $(".btn-close, .screen-overlay").click(function (e) { $(".screen-overlay").removeClass("show"); $(".mobile-offcanvas").removeClass("show"); $("body").removeClass("offcanvas-active"); }); }); // jquery end