Mobile navigation from the LEFT

Mobile LEFT navigation.css

#nav-toggle {
    width: 30px;
    height: 20px;
    position: absolute;
    z-index: 10;
    right: 15px;
	display: none;
    top: 15px;
}
#nav-toggle .icon-bar {
    width: 30px;
    height: 3px;
    background-color: #fff;
    display: table;
    margin-bottom: 5px;
    border-radius: 6px;
    top: 0px;
    position: relative;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#nav-toggle .top-animate {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    top: 6px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#nav-toggle .mid-animate {
    opacity: 0;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
#nav-toggle .bottom-animate {
    -webkit-transform: rotate(-225deg);
    -ms-transform: rotate(-225deg);
    transform: rotate(-225deg);
    position: relative;
    top: -10px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

@media (max-width: 768px) {
  #nav-toggle {
  	display:block;
  }
  .nav{
    flex-direction: column;
  	-webkit-flex-direction: column;
  	margin: 0px;
  }
  .open-menu .fixed-menu{
  	left:0px;
  	-webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
  .fixed-menu{
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    position: fixed;
    left: -300px;
    top: 0px;
    height: 100%;
    background-color: rgba(220, 13, 21, 0.8);
    width: 300px;
  	z-index:10;
  }
}

Mobile LEFT navigation.html

<a href="javascript:void(0)" id="nav-toggle" class="navigation-toggle">
	<span class="icon-bar top-menu"></span>
	<span class="icon-bar mid-menu"></span>
	<span class="icon-bar bottom-menu"></span>
</a>
<div class="fixed-menu" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Over ons</a></li>
    <li><a href="#">Restaurant</a></li>
    <li><a href="#">Cafetaria</a></li>
    <li><a href="#">Bestellen</li>
    <li><a href="#">Contact</a></li>
	</ul>
</div>

Mobile LEFT navigation.js

$('#nav-toggle').on({
    click:function(){
      openMenu();
    }
  });
  $('.main').on({
    click: function (){
      closeMenu();
    }
  });
  $('.main').on({
    click: function (){
      closeMenuAnimation();
    }
  });
  
function openMenu(){
  $('html').toggleClass('open-menu');
}
function closeMenu(){
  $('html').removeClass('open-menu');
}
function closeMenuAnimation(){
  $(".top-menu").removeClass("top-animate");
  $(".mid-menu").removeClass("mid-animate");
  $(".bottom-menu").removeClass("bottom-animate");
}
$("#nav-toggle").click(function () {
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
});