css - Bootstrap, fixed left offcanvas sidebar with scrollable content in the center -
i want create template project working on using bootstrap , have problem behavior of offcanvas sidebar. want sidebar take space below header , not scrollable. have found 2 templates, combined want have problem merging them not css. have tried lot can't figure how it. here picture showing desired functionality/behavior of template want make:
here 2 templates have found:
and here code (html+css) of each template (stripped down) can figure out how work:
dashboard - fixed sidebar
html
<div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="#">overview</a></li> <li><a href="#">reports</a></li> <li><a href="#">analytics</a></li> <li><a href="#">export</a></li> </ul> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <h1 class="page-header">dashboard</h1> </div> </div>
dashboard (with off-canvas sidebar) - scrollable
html
<div class="row row-offcanvas row-offcanvas-left"> <div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="#">overview</a></li> <li><a href="#">reports</a></li> <li><a href="#">analytics</a></li> <li><a href="#">export</a></li> </ul> </div> <div class="col-sm-9 col-md-10 main"> <h1 class="page-header">dashboard</h1> </div> </div>
Comments
Post a Comment