<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right open-btn" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
  </button>
    <button class="navbar-toggler navbar-toggler-right close-btn" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

<div class="container">
    <h1>View this effect on screen resolution > 768px</h1>
    <br/>
</div>
html,
body{
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 768px) {
    .navbar-collapse {
        position: fixed;
        z-index: 1080;
        top: 0;
        left: -30%;
        width: 30%;
        height: 100%;
        background-color: #E9E9E9;
        display: block;
        transition: all 1s ease-in-out;
    }
}

@media only screen and (max-width: 428px) {
    .navbar-collapse {
        position: fixed;
        z-index: 1080;
        top: 0;
        left: -75%;
        width: 75%;
        height: 100%;
        background-color: #E9E9E9;
        display: block;
        transition: all 1s ease-in-out;
    }

    .open-btn {
        display: block;
    }

    .close-btn {
        display: none;
    } 
}
View Compiled
$(document).ready(function() {
    
    // Get dynamic width based on media query value
    var width = $('.navbar-collapse').css('left');
    
    $("button.open-btn").click(function() {
        $(".collapse").css("left", "0");
        $(this).fadeOut();
        $(".close-btn").fadeIn();
    });

    $(".close-btn").click(function() {
        $(".collapse").css("left", width);
        $(this).fadeOut();
        $(".open-btn").fadeIn();
    });
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css
  2. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js
  3. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js