Bootstrap Off Canvas Navigation

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<header>
    <div class="brand">
        <h2>Coolness</h2>
    </div>
</header>
<div class="offcanvas-header visible-xs">
    <button type="button" class="offcanvas-nav-toggle active" data-toggle="offcanvas">
        <span class="sr-only">Toggle navigation</span>
        <span class="fa fa-bars" aria-hidden="true"></span>
    </button>
</div>
<div class="container-fluid">
        <div class="row row-offcanvas active">
        
        <nav class="col-xs-9 col-sm-3 sidebar-offcanvas" role="navigation">
            <ul role="group">
                <li role="menuitem">
                    <a href="#">Dashboard</a>
                    <ul role="group">
                        <li role="menuitem">
                            <a href="#">Sub nav item</a>
                        </li>
                        <li role="menuitem">
                            <a href="#">Sub nav item</a>
                        </li>
                        <li role="menuitem">
                            <a href="#">Sub nav item</a>
                        </li>
                        <li role="menuitem">
                            <a href="#">Sub nav item</a>
                        </li>
                    </ul>
                </li>
                <li role="menuitem">
                    <a href="#">Blog</a>
                    <ul role="group">
                        <li role="menuitem">
                            <a href="#">Sub nav item</a>
                        </li>
                        <li role="menuitem">
                            <a href="#">Sub nav item</a>
                        </li>
                        <li role="menuitem">
                            <a href="#">Sub nav item</a>
   ...

SCSS

@import url(http://fonts.googleapis.com/css?family=Lobster+Two:700);

body {
    overflow-x: hidden;
}

header {
    border-bottom: 1px solid #ececec;
    min-height: 50px;
    .brand {
        position: relative;
        top: 10px;
        h2 {
            font-size: 1.7em;
            font-family: 'Lobster Two', cursive;
            margin: 0;
            text-align: center;
        }  
    }
}

.offcanvas-header {
    background: #333;
    .offcanvas-nav-toggle {
        background: transparent;
        border: 0;
        color: white;
        padding: 10px 15px;
        &:focus {
            outline: none;
        }
    }
}

/* Offcanvas container */
.row-offcanvas {
    margin-top: 15px;
}

/* Navigation Styles */
.sidebar-offcanvas {
    > ul {
        margin-left: -15px; 
    }
    ul {
        list-style: none;
        padding: 0;      
        > li {
            > a {
                display: block;
                padding: 10px 15px;
            }
            > ul {
                > li {
                    >    a {
                        padding: 10px 30px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 767px) {
    .row-offcanvas {
        position: relative;
        left: 0;
        -webkit-transition: all .25s ease-out;
        -moz-transition: all .25s ease-out;
        transition: all .25s ease-out;
        .sidebar-offcanvas {
            position: absolute;
            left: -75%;
            > ul {
                margin-left: 0;
            }
        }
        &.active {
            left: 75%;
        }
    }
}

.item {
    text-align: center;
    background: #0def92;
    height: 200px;
    margin-bottom: 30px;
    padding: 30px;
}

JavaScript

// Toggle the navigation menu
$('[data-toggle=offcanvas]').click(function () {
    $('.row-offcanvas').toggleClass('active');
    $('.offcanvas-nav-toggle').toggleClass('active');
    $('body').toggleClass('offcanvas-active');
});