I'm using bootstrap 3 to build a side nav with a toggle hamburger button. Basically I've given the normal bar a certain width and then played with the classes .collapse, .collapsing .collapse.in, as these are the three different states of the toggle menu. My goal is to have the bar collapse with a steady movement and what is happening now is that the bar the menu opens well until the end of the content. In the end of the content, it breaks. The bar's height is 100% the size of the window and fixed on the left side while its width is around 400px. I've tried adding content to the bottom of the nav using position absolute and bottom 0, but no luck.
Thanks
nav ul {
width: 245px;
}
.collapsing {
position: fixed;
z-index: 1000;
background: #ba2625;
top: 0;
bottom: 0;
box-shadow: 4px 6px 6px black;
}
.navbar-collapse.collapse {
display: none!important;
height: 100% ;
top: 0;
bottom: 0;
}
.collapse.in {
position: fixed;
z-index: 1000;
display: block!important;
background: #ba2625;
top: 0;
bottom: 0;
box-shadow: 4px 6px 6px black;
}