<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="row affix-row"> <div class="col-sm-3 col-md-2 affix-sidebar"> <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="visible-xs navbar-brand">Sidebar menu</span> </div> <div class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="nav navbar-nav" id="sidenav01"> <li> <a href="#" data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed"> <span class="glyphicon glyphicon-cloud"></span> Submenu 1 <span class="caret glyphicon-caret-down pull-right"></span> </a> <div class="collapse" id="toggleDemo" style="height: 0px;"> <ul class="nav nav-list"> <li><a href="#">Submenu1.1</a></li> <li><a href="#">Submenu1.2</a></li> <li><a href="#">Submenu1.3</a></li> </ul> </div> </li> <li class="active"> <a href="#" data-toggle="collapse" data-target="#toggleDemo2" data-parent="#sidenav01" class="collapsed"> <span class="glyphicon glyphicon-inbox"></span> Submenu 2 <span class="caret pull-right"></span> </a> <div class="collapse" id="toggleDemo2" style="height: 0px;"> <ul class="nav nav-list"> <li><a href="#">Submenu2.1</a></li> <li><a href="#">Submenu2.2</a></li> <li><a href="#">Submenu2.3</a></li> </ul> </div> </li> <li><a href="#"><span class="glyphicon glyphicon-lock"></span> Normalmenu</a></li> <li><a href="#"><span class="glyphicon glyphicon-calendar"></span> WithBadges <span class="badge pull-right">42</span></a></li> <li><a href=""><span class="glyphicon glyphicon-cog"></span> PreferencesMenu</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div class="col-sm-9 col-md-10 affix-content"> <div class="container"> <div class="page-header"> <h3><span class="glyphicon glyphicon-th-list"></span> Navigation</h3> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lectus orci, viverra nec neque non, tincidunt commodo leo. Nullam eleifend velit purus, id aliquam elit venenatis sit amet. Cras vel nisl eget eros tempus viverra. Phasellus in enim et nulla tempor blandit. Donec at lectus sit amet velit faucibus tincidunt quis sed est. Mauris placerat purus odio. In egestas, velit quis congue sodales, turpis lacus pellentesque neque, quis accumsan orci nibh sed mauris. Sed sit amet pulvinar felis. Aliquam consequat tellus non ligula elementum, at egestas quam vestibulum. Duis sed urna sit amet quam rutrum malesuada sed eu risus. Cras sit amet velit a neque tincidunt cursus sed ac nunc. Donec ac auctor purus. Proin viverra turpis sit amet dui sagittis, quis tempor elit suscipit. Curabitur rutrum lacus et diam lacinia, vel ullamcorper libero vulputate. Phasellus sem ligula, pharetra sed nisl sed, facilisis sagittis ante. Nullam egestas turpis et mauris aliquet cursus. Nullam vel eleifend neque.</p> </div> </div> </div>

/* make sidebar nav vertical */ @media (min-width: 768px){ .affix-content .container { width: 700px; } html,body{ background-color: #f8f8f8; height: 100%; overflow: hidden; } .affix-content .container .page-header{ margin-top: 0; } .sidebar-nav{ position:fixed; width:100%; } .affix-sidebar{ padding-right:0; font-size:small; padding-left: 0; } .affix-row, .affix-container, .affix-content{ height: 100%; margin-left: 0; margin-right: 0; } .affix-content{ background-color:white; } .sidebar-nav .navbar .navbar-collapse { padding: 0; max-height: none; } .sidebar-nav .navbar{ border-radius:0; margin-bottom:0; border:0; } .sidebar-nav .navbar ul { float: none; display: block; } .sidebar-nav .navbar li { float: none; display: block; } .sidebar-nav .navbar li a { padding-top: 12px; padding-bottom: 12px; } } @media (min-width: 769px){ .affix-content .container { width: 600px; } .affix-content .container .page-header{ margin-top: 0; } } @media (min-width: 992px){ .affix-content .container { width: 900px; } .affix-content .container .page-header{ margin-top: 0; } } @media (min-width: 1220px){ .affix-row{ overflow: hidden; } .affix-content{ overflow: auto; } .affix-content .container { width: 1000px; } .affix-content .container .page-header{ margin-top: 0; } .affix-content{ padding-right: 30px; padding-left: 30px; } .affix-title{ border-bottom: 1px solid #ecf0f1; padding-bottom:10px; } .navbar-nav { margin: 0; } .navbar-collapse{ padding: 0; } .sidebar-nav .navbar li a:hover { background-color: #428bca; color: white; } .sidebar-nav .navbar li a > .caret { margin-top: 8px; } }