Boostrap 4.3 Responsive Mobile Menu (left)
HTML
<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-sm-start fixed-top"> <div class="container-fluid"> <a class="navbar-brand order-1 order-lg-0 ml-lg-0 ml-2 mr-auto" href="#">FrontendFunn</a> <button class="navbar-toggler align-self-start" type="button"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse bg-dark p-3 p-lg-0 mt-5 mt-lg-0 d-flex flex-column flex-lg-row flex-xl-row justify-content-lg-end mobileMenu" id="navbarSupportedContent"> <ul class="navbar-nav align-self-stretch"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0 align-self-stretch"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> </nav> <div class="overlay"></div> <div class="container mt-5 pt-2"> <div class="row"> <div class="col-md-12"> <div class="alert bg-info my-3 d-none d-lg-block d-xl-block text-center text-white"> Resize the Browser Window to see the effect </div> </div> <div class="col-md-12"> <div class="alert bg-success my-3 text-center text-white"> Please Like the video and Subscribe To Our Youtube Channel. <h6 class="text-center">A Like will be always appreciated</h6> </div> </div> </div> </div>
SCSS
@media (max-width: 992px) { .mobileMenu{ transform: translateX(-100%); position: fixed; top:0px; bottom: 0; margin: auto; left: 0; transition: all ease 0.25s; &.open{ transform: translateX(0%); } .navbar-nav{ overflow-y: auto; } } .overlay{ position: fixed; top:0; bottom: 0; left: 0; right: 0; margin: auto; background-color: rgba(0,0,0,0.5); display: none; &.open{ display: block; z-index:1029; } } }
CSS
@media (max-width: 992px) { .mobileMenu { transform: translateX(-100%); position: fixed; top: 0px; bottom: 0; margin: auto; left: 0; transition: all ease 0.25s; } .mobileMenu.open { transform: translateX(0%); } .mobileMenu .navbar-nav { overflow-y: auto; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: rgba(0, 0, 0, 0.5); display: none; } .overlay.open { display: block; z-index: 1029; } }
JAVASCRIPT
$(document).ready(function(){ var fixHeight = function(){ $(".navbar-nav").css("max-height",document.documentElement.clientHeight -150); } fixHeight(); $(window).resize(function(){ fixHeight(); }); $(".navbar .navbar-toggler").on("click",function(){ fixHeight(); }); $(".navbar-toggler, .overlay").on("click",function(){ $(".mobileMenu, .overlay").toggleClass("open"); }); });