<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="container-fluid"> <div class="row"> <nav class="hidden-xs-down bg-faded sidebar"> <ul class="nav nav-pills flex-column"> <li class="nav-item"><a class="nav-link active" href="#">This<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li> <li class="nav-item"><a class="nav-link" href="#">That<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li> <li class="nav-item"><a class="nav-link" href="#">Another<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li> <li class="nav-item"><a class="nav-link" href="#">Something<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li> <li class="nav-item"><a class="nav-link" href="#">And Again<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li> </ul> </nav> </div> </div> <div class="content"> Somthing to amuse you </div>

body,html{ height: 100%; } nav.sidebar, .main{ -webkit-transition: margin 200ms ease-out; -moz-transition: margin 200ms ease-out; -o-transition: margin 200ms ease-out; transition: margin 200ms ease-out; } @media (min-width: 200px) { .main{ position: absolute; width: calc(100% - 50px); margin-left: 50px; float: right; } .sidebar { margin-left: -150px; width: 200px; } .sidebar:hover{ margin-left: 0px; } .content { margin-left: 50px; } } @media (min-width: 1330px) { .main{ position: absolute; width: calc(100% - 200px); margin-left: 50px; float: right; } .sidebar { margin-left: 0px; width: 200px; } .content { margin-left: 200px; } } .sidebar { position: fixed; top: 0px; bottom: 0; left: 0; z-index: 1000; padding: 20px; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ border-right: 1px solid #eee; } /* Sidebar navigation */ .sidebar { padding-left: 0; padding-right: 0; width: 200px; } .sidebar .nav { margin-bottom: 20px; } .sidebar .nav-item { width: 100%; } .sidebar .nav-item .active { background-color: #eee; color: #000; } .sidebar .nav-item a:hover { background-color: #eee; color: #000; } .sidebar .nav-item + .nav-item { margin-left: 0; } .sidebar .nav-link { border-radius: 0; }