Nav Side

script.js

$('.mobile-toggle a').on('click', function(e) {
    e.preventDefault();
    $('.mobile-nav-overlay').fadeIn(400, function() {
        $('.mobile-nav-outer').addClass('opened');
    });
});

$('.mobile-nav-overlay .close-button').on('click', function(e) {
    e.preventDefault();
    $('.mobile-nav-outer').removeClass('opened');
    $('.mobile-nav-overlay').fadeOut(400);
});

style.scss

.mobile-nav-overlay {
	// display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(0,0,0,.5);
	.mobile-nav-outer {
		box-shadow: 1px 1px 10px #efefef;
		position: absolute;
		left: 0; top: 0;
		padding: 50px 20px 20px;
		background-color: #212121;
		max-width: 275px;
		width: 85%;
		height: 100vh;
		@include translate(-400px);
		@include transition( transform .3s );

		&.opened {
			@include translate(0);
		}
	}
}