How to slide nav bar from left instead from top?

Easy. Change the default behavior from

<button ... data-toggle="collapse" data-target="#my-navbar-collapse">

to slide-collapse functionality which we are going to implement now

<button ... data-toggle="slide-collapse" data-target="#my-navbar-collapse">

Where the menu is contained within div that has the id my-navbar-collapse. Note that using id instead of class selector will improve the accessibility because bootstrap will append ARIA states (expanded/collapsed) to the menu
automatically.

<div id="my-navbar-collapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        ...
    </ul>
</div>

Class .collapse in bootstrap ensures the menu to be initially hidden.

---

The code:

And then paste the following Javascript somewhere in the footer:

// mobile menu slide from the left
$('[data-toggle="slide-collapse"]').on('click', function() {
    $navMenuCont = $($(this).data('target'));
    $navMenuCont.animate({'width':'toggle'}, 350);
});

And the following CSS properties:

#my-navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 280px; /*example + never use min-width with this solution */
    height: 100%;
}

Some hints:

• Good idea is also to make responsive query where menu width would be 100% for smartphones instead of always 280px. It works like a charm.
• If you have horizontal menu for desktops, and slider only for smaller devices, you can easily take advantage of @grid-float-breakpoint and @grid-float-breakpoint-max Bootstrap LESS variables