How to make an Affixed sidebar navigation with fixed width (Bootstrap)

Question

After several searches on the web, I can't find the solution for my needs. So maybe any of you can helpmeto find the good way to do it.

Pretty much, I would like to use Bootstrap to make a template structure similar to this one: http://themes.mediacreed.com/html/synergy/#portfolio.html

• 2 main parts : navigation and content wrapper
• the navigation need to be "affixed" on the left as a sidebar, and his width need to be fixed
• the content wrapper need to be adapted to the size of the window.

Do you think that Bootstrap can do it? Cheers

Answer 1

OK, after more search on the web, I've found this solution:

HTML

<!-- Begin Side Nav -->
<div class="sideNav">
    <h5>item</h5>
</div>
<!-- End Side Nav -->

<!-- Begin Main Content -->
<div class="content">
    <!-- here the content........ -->
</div>

CSS

.content
{
    overflow: hidden;
    position: absolute;
    top: 0px; 
    bottom: 0px;
    left: 100px;
    right: 0px;
    padding: 0px 10px;
    overflow: auto;
}
.sideNav
{
    padding: 10px 0;
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 100px; /* same as .content left */
    background-color: #fff;
    border-right: 1px solid #000; 
    z-index: 1020;
}

This code is inspired from http://jsfiddle.net/whoiskb/GqXdM/light/ (but I've just keep the essential)

Hope it can help

Answer 2

Here is another fixed sidebar option for the latest Bootstrap 3..

Demo: http://www.bootstrapzero.com/bootstrap-template/basis

Code: http://www.bootply.com/86704