How to slide nav bar from left instead from top?

Question

Bootstrap supports toggling a navbar from the top. How can I slide it from the left when the screen-size is small?

For example:

In the screenshot pr

Answer 1

Bootstrap 4 (update 2020)

IMO the simplest way is to override the Bootstrap collapse animation so that it transitions from left to right (width instead of height). Instead of toggling display:block when .collapse.show is used, the Navbar is always display:block which enables you to position as needed and use transitions from both collapsing directions...

Open menu: .collapse - .collapsing - .collapse.show
Close menu: .collapse.show - .collapsing.show - .collapse

    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: -100%;
        width: 100%;
        transition: all 0.4s ease;
        display: block;
        opacity: 0.8;
    }
    .navbar-collapse.collapsing {
        height: auto !important;
        left: -100%;
        margin-left: 1px;
        transition: all 0.2s ease;
        opacity: 0.9;
    }
    .navbar-collapse.show {
        margin-left: 100%;
        transition: all 0.2s ease;
        opacity: 1;
    }

https://codeply.com/go/KSS4pjqtJy (full width)
https://codeply.com/p/BvPCPA1wgZ (full height)