How to make a sliding side navigation bar that is only in middle of display and not the whole height of the screen? (bootstrap 3, materialize)

Question

I am using the following sticky footer template from bootstrap: http://getbootstrap.com/examples/sticky-footer-navbar/

I want to have a side-nav bar (like this one: http://materializecss.com/side-nav.html , the kind you can click a button and it slides out from the side), but I do not want it to take up the whole page, I only want it to cover up the "middle" section of the page above the footer and below the header.

Does bootstrap or materialize support this sliding side-navigation bar in the middle of the page and not take up the whole thing?

Answer 1

You just have to customize css.

For example, with a 80px header & a 80px footer :

.side-nav {
    top: 80px;
    height: calc(100% - 160px);
}

http://codepen.io/migli/pen/JNPaep