Cacher is the code snippet organizer for pro developers

// Variables

// Header: #303F9F
// Font: #3A3C48
// Nav: #C5CAE9

// BASE
* {
    box-sizing: border-box;
}
body {
    font-family: "Roboto";
    font-weight: 500;
}



// HEADER

.header {
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #303F9F;
    right: 0;
    z-index: 50;
    
    &__site-title {
        color: white;
        margin: 0 0 0 20px;
        padding: 30px 0;
        font-size: 18px;
        
        @media (min-width: 650px) {
            font-size: 2em;
            padding: 20px 0;
        }

    }
}    



// MAIN

.main {
    
    padding: 100px 60px;
}


// NAVIGATION

.nav {
    
    position: fixed;
    right: 0;
    top: 80px;
    background-color: #C5CAE9;
    width: 200px;
    height: 100%;
    padding: 10px 20px 100px;
    overflow-y: auto;
    
    transition: all .3s ease;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -webkit-transition: all .3s ease;
    
    &--open {
        
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    
    &__trigger {
        position: fixed;
        top: 25px;
        right: 30px;
        color: white;
        font-size: 28px;
    }
    
    &__list-item {
        list-style-type: none;
        margin: 30px 0;
        text-align: right;
    }
    
    &__link {
        text-decoration: none;
        padding: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #3A3C48;
    }
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

(function() {
    
    //Cache Dom Elements
    var navTrigger = $('.nav__trigger');
    var nav = $('.nav');
    
    //Function
    
    function triggerMenu(event) {
        
        event.preventDefault();
        nav.toggleClass('nav--open');
    }
    
    //Bind Function
    
    navTrigger.on('click', triggerMenu);
    
   
})();

<header class="header">
    <h1 class="header__site-title">Mobile Navigation Tutorial</h1>

    <a href="#" class="nav__trigger"><i class="nav__icon fa fa-bars"></i></a>

    <nav class="nav">
        <ul class="nav__list">
            <li class="nav__list-item"><a href="#" class="nav__link">Home</a></li>
            <li class="nav__list-item"><a href="#" class="nav__link">About</a></li>
            <li class="nav__list-item">
                <a href="#" class="nav__link">Services</a>
            </li>
            <li class="nav__list-item">
                <a href="#" class="nav__link">Portfolio</a>
            </li>
            <li class="nav__list-item">
                <a href="#" class="nav__link">Media</a>
            </li>
            <li class="nav__list-item">
                <a href="#" class="nav__link">Contact</a>
            </li>

        </ul>
    </nav>

</header>

<main class="main">
    <h2>Lorem ipsum dolor.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid hic non nostrum iure id asperiores itaque, similique in omnis maiores placeat error et at quo, deserunt, voluptatem? Esse, excepturi, voluptatum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio mollitia amet harum qui alias. Alias tempora sit aspernatur facere deserunt accusamus, nesciunt? Harum temporibus minima voluptate dolorem iusto. Vero quo ullam maiores quod iure et earum a voluptatibus, temporibus nulla quisquam rem nam provident accusamus, totam inventore quae. Et, inventore.</p>
    <br />
    <h2>Lorem ipsum dolor.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores magni nihil id natus similique nobis minima, dolores, porro perspiciatis nam.</p>
</main>