<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="row row-offcanvas row-offcanvas-left"> <!-- sidebar --> <div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar"> <ul class="nav" id="menu"> <li><a href="#"><i class="fa fa-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></a></li> <li><a href="#"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Stories</span></a></li> <li><a href="#"><i class="fa fa-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></a></li> <li><a href="#"><i class="fa fa-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></a></li> <li> <a href="#" data-target="#item1" data-toggle="collapse"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span></a> <ul class="nav nav-stacked collapse left-submenu" id="item1"> <li><a href="google.com">View One</a></li> <li><a href="gmail.com">View Two</a></li> </ul> </li> <li> <a href="#" data-target="#item2" data-toggle="collapse"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span></a> <ul class="nav nav-stacked collapse" id="item2"> <li><a href="#">View One</a></li> <li><a href="#">View Two</a></li> <li><a href="#">View Three</a></li> </ul> </li> <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link</span></a></li> </ul> </div> <!-- /sidebar --> <!-- main right col --> <div class="column col-sm-9 col-xs-11" id="main"> <p><a href="#" data-toggle="offcanvas"><i class="fa fa-navicon fa-2x"></i></a></p> <p> Main content... </p> </div> <!-- /main --> </div> </div> <script src="https://use.fontawesome.com/a22aca14e3.js"></script>

.wrapper:before, .wrapper:after, .column:before, .column:after { content: ""; display: table; } .wrapper:after, .column:after { clear: both; } #sidebar { background-color: #eee; padding-left: 0; float: left; min-height: 100%; } #sidebar .collapse.in { display: inline; } #sidebar > .nav>li>a { white-space: nowrap; overflow: hidden; } #main { padding: 15px; left: 0; } /* * off canvas sidebar * -------------------------------------------------- */ @media screen and (max-width: 768px) { #sidebar { min-width: 44px; } #main { width: 1%; left: 0; } #sidebar .visible-xs { display:inline !important; } .row-offcanvas { position: relative; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .row-offcanvas-left.active { left: 45%; } .row-offcanvas-left.active .sidebar-offcanvas { left: -45%; position: absolute; top: 0; width: 45%; } } @media screen and (min-width: 768px) { .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .row-offcanvas-left.active { left: 3%; } .row-offcanvas-left.active .sidebar-offcanvas { left: -3%; position: absolute; top: 0; width: 3%; text-align: center; min-width:42px; } #main { left: 0; } }

/* off-canvas sidebar toggle */ $('[data-toggle=offcanvas]').click(function() { $('.row-offcanvas').toggleClass('active'); $('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs'); });