I'm currently exploring ways to integrate this style of sidebar navigation with the layout from my JSfiddle. In the first example, the sidebar collapses to the main icons, but the use of the Nav tag is causing it to slide under the content instead of pushing it over for resizing, which is not ideal.
My ideal setup would involve placing the nav in a column that maintains its space and aligns with other rows, similar to the second JSfiddle, adjusting rows and columns accordingly based on its open or collapsed state. Is there a simpler alternative that achieves this without the Nav tag?
Key Sidebar Functions:
Html:
<body>
<div class="row">
<div class="col-md-12" style="height:60px;">
Header Area
</div>
</div>
...
</body>
Javascript:
(function () {
...
}).call(this);
CSS:
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
...
Desired Layout:
<div class="row" style="height:60px; margin-bottom:10px;">
<div class="well">
Header area
</div>
</div>
...
</div>