<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 ----------> <div class="container"> <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <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 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="#">Disabled</a> </li> <li class="nav-item"> <a data-toggle="collapse" href="#" class="nav-link" data-target=".collapse" role="button" class="text-white p-1"> <i class="fa fa-bars fa-lg"></i> menu </a> </li> </ul> </div> </nav> <div class="row collapse show no-gutters d-flex h-100 position-relative"> <div class="col-3 px-0 w-sidebar navbar-collapse collapse d-none d-md-flex"> <!-- spacer col --> </div> <div class="col px-3 px-md-0"> <!-- toggler --> </div> </div> </div> <div class="container-fluid px-0"> <div class="row collapse show no-gutters d-flex h-100 position-relative"> <div class="col-3 p-0 h-100 w-sidebar navbar-collapse collapse d-none d-md-flex sidebar"> <!-- fixed sidebar --> <div class="navbar-dark bg-dark text-white position-fixed h-100 align-self-start w-sidebar"> <h6 class="px-3 pt-3">Fixed Menu <a data-toggle="collapse" class="px-1 d-inline d-md-none text-white" href="#" data-target=".collapse"><i class="fa fa-bars"></i></a></h6> <ul class="nav flex-column flex-nowrap text-truncate"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </div> <div class="col p-3"> <h3>Content..</h3> <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p> <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p> </div> </div> </div>

:root { /* set the sidebar width */ --sidebar-width: 25vw; } body { overflow-x: hidden; padding-top: 55px; } .w-sidebar { width: var(--sidebar-width); max-width: var(--sidebar-width); top: 0; z-index: 1060; } .row.collapse{ margin-left: calc(-1 * var(--sidebar-width)); left: 0; transition: margin-left .15s linear; } .row.collapse.show { margin-left: 0 !important; } .row.collapsing { margin-left: calc(-1 * var(--sidebar-width)); left: -0.05%; transition: all .15s linear; } @media (max-width:768px) { .row.collapse, .row.collapsing { margin-left: 0 !important; left: 0 !important; overflow: visible; } .row > .sidebar.collapse { display: flex !important; margin-left: -100% !important; transition: all .3s ease; position: fixed; z-index: 1050; max-width: 0; min-width: 0; flex-basis: auto; } .row > .sidebar.collapse.show { margin-left: 0 !important; width: 100%; max-width: 100%; min-width: initial; } .row > .sidebar.collapsing { display: flex !important; margin-left: -10% !important; transition: all .3s ease !important; position: fixed; z-index: 1050; min-width: initial; } }