Search code examples
htmltwitter-bootstrapangularmaterialize

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)

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?

Solution

  • 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