"Bootstrap 4 SideNav Bar"
Bootstrap 4.1.1 Snippet by dkstudio

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-lg bg-dark navbar-dark shadow-lg"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse " id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 4</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 5</a> </li> </ul> </div> </nav> <br> <div class="container"> <h3>Simple Collapsible Side Navigation</h3> <p>In this example, the side navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p> <p>Only when the button is clicked, the navigation bar will be displayed.</p> </div>
@media(max-width: 991px){ #collapsibleNavbar { height: 100vh; width: 320px; position: fixed; left: 0; top: 56px; background: #fff; padding: 20px; color: red; z-index: 2; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; } #collapsibleNavbar ul li { padding:10px; border-bottom: 1px solid #dcdcdc; color: #000; } #collapsibleNavbar ul li a{ color: #000; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } }

Related: See More


Questions / Comments: