Mobile navigation

Mobile navigation CSS .css

.top-animate {
  background: #fff !important;
  top: 13px !important;
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}
.mid-animate {
  opacity: 0;
}
.bottom-animate {
  background: #fff !important;
  top: 13px !important;
  -webkit-transform: rotate(-225deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-225deg);
}
.top-menu,
.mid-menu,
.bottom-menu {
  width: 28px;
  height: 4px;
  border-radius: 10px;
  background-color: #fff;
}
.top-menu {
  top: 5px;
}
.mid-menu {
  top: 13px;
}
.bottom-menu {
  top: 21px;
}
.menui {
  background: rgba(231, 76, 60, 1);
  transition: 0.6s ease;
  transition-timing-function: cubic-bezier(0.75, 0, 0.29, 1.01);
  margin-top: 10px;
  position: absolute;
}
.menu-trigger {
  z-index: 999;
  position: relative;
  display: block;
  padding: 9px;
  height: 32px;
  width: 32px;
  margin: 0px;
}
.hamburger{
  display: inline-block;
  width: 28px;
  height: 28px;
}
.mobilenav {
  font-family: inherit;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(231, 76, 60, 0.9);
  text-transform: uppercase;
}
.mobilenav li {
  list-style-type: none;
  text-align: center;
  padding: 10px;
  font-size: 220%;
  color: #fff;
  text-decoration: none;
  font-weight: 300;
  width: 100%;
}
.mobilenav li:last-child span {
  border-bottom: none;
}
.mobilenav li:hover {
  cursor: pointer;
}
.nav-label {
  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
  display: block;
  width: 350px;
  margin: 0 auto;
}
.mobilenav li:first-child {
  margin-top: 60px;
}

Mobile navigation HTMl .html

<div class="mobilenav">
	<ul>
		<li data-rel="#header">
		   <span class="nav-label">Home</span>
		</li>
		<li data-rel="#over-ons">
			<span class="nav-label">About Us</span>
		</li>
		<li data-rel="#why-choose-us">
			<span class="nav-label">Why Choose Us</span>
		</li>
		<li data-rel="#logo-box">
			<span class="nav-label">logo's</span>
		</li>
		<li data-rel="#onze-klanten">
			<span class="nav-label">Onze klanten</span>
		</li>
		<li data-rel="#portfolio">
			<span class="nav-label">Portfolio</span>
		</li>
		<li data-rel="#contact">
			<span class="nav-label">Contact</span>
		</li>
	</ul>
</div>
<a href="javascript:void(0)" class="menu-trigger">
   <div class="hamburger">
	 <div class="menui top-menu"></div>
	 <div class="menui mid-menu"></div>
	 <div class="menui bottom-menu"></div>
   </div>
</a>

Mobile navigation JS .js

$(".menu-trigger, .mobilenav").click(function () {
	$(".mobilenav").fadeToggle(500);
});
$(".menu-trigger, .mobilenav").click(function () {
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
});