Mobile Menu

mobile-menu-media.css

.top-header .container{
		position: static;
	}
	.main-menu{
		position: absolute;
		top: 100%;
		left: -120vw;
		right: 0;
		width: 100%;
		background-color: #266DCD;
		flex-direction: column;
		z-index: 10;
		padding-bottom: 20px;
		padding-top: 20px;
		color: #fff;
		transition: all 0.5s ease-in-out;
	}
	.main-menu.active{
		left: 0;
	}
.main-menu{
		width: 100%;
	}
	.main-menu ul{
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
	}
	.main-menu ul li{
		margin-left: 0;
		width: 100%;
	}

	.main-menu ul li a{
		padding: 10px 20px;
		display: block;
		color: #fff;
		text-align: center;
	}
	.main-menu ul li a:hover{
		background-color: #3B77C8;
	}

toggle-mobile-menu.css

.navTrigger {
	cursor: pointer;
	min-width: 30px; 
	height: 25px;
	position: relative;
	display: none;
}
.navTrigger i {
	background-color: #1C1C1C;
	border-radius: 2px;
	content: '';
	display: block;
	width: 100%;
	height: 4px;
}
.navTrigger i:nth-child(1) {
	-webkit-animation: outT 0.8s backwards;
	animation: outT 0.8s backwards;
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}
.navTrigger i:nth-child(2) {
	margin: 5px 0;
	-webkit-animation: outM 0.8s backwards;
	animation: outM 0.8s backwards;
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}
.navTrigger i:nth-child(3) {
	-webkit-animation: outBtm 0.8s backwards;
	animation: outBtm 0.8s backwards;
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
	-webkit-animation: inT 0.8s forwards;
	animation: inT 0.8s forwards;
}
.navTrigger.active i:nth-child(2) {
	-webkit-animation: inM 0.8s forwards;
	animation: inM 0.8s forwards;
}
.navTrigger.active i:nth-child(3) {
	-webkit-animation: inBtm 0.8s forwards;
	animation: inBtm 0.8s forwards;
}
@-webkit-keyframes inM {
	50% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(45deg);
	}
}
@keyframes inM {
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(45deg);
	}
}
@-webkit-keyframes outM {
	50% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(45deg);
	}
}
@keyframes outM {
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(45deg);
	}
}
@-webkit-keyframes inT {
	0% {
		-webkit-transform: translateY(0px) rotate(0deg);
	}
	50% {
		-webkit-transform: translateY(9px) rotate(0deg);
	}
	100% {
		-webkit-transform: translateY(9px) rotate(135deg);
	}
}
@keyframes inT {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(9px) rotate(0deg);
	}
	100% {
		transform: translateY(9px) rotate(135deg);
	}
}
@-webkit-keyframes outT {
	0% {
		-webkit-transform: translateY(0px) rotate(0deg);
	}
	50% {
		-webkit-transform: translateY(9px) rotate(0deg);
	}
	100% {
		-webkit-transform: translateY(9px) rotate(135deg);
	}
}
@keyframes outT {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(9px) rotate(0deg);
	}
	100% {
		transform: translateY(9px) rotate(135deg);
	}
}
@-webkit-keyframes inBtm {
	0% {
		-webkit-transform: translateY(0px) rotate(0deg);
	}
	50% {
		-webkit-transform: translateY(-9px) rotate(0deg);
	}
	100% {
		-webkit-transform: translateY(-9px) rotate(135deg);
	}
}
@keyframes inBtm {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-9px) rotate(0deg);
	}
	100% {
		transform: translateY(-9px) rotate(135deg);
	}
}
@-webkit-keyframes outBtm {
	0% {
		-webkit-transform: translateY(0px) rotate(0deg);
	}
	50% {
		-webkit-transform: translateY(-9px) rotate(0deg);
	}
	100% {
		-webkit-transform: translateY(-9px) rotate(135deg);
	}
}
@keyframes outBtm {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-9px) rotate(0deg);
	}
	100% {
		transform: translateY(-9px) rotate(135deg);
	}
}

toggle-mobile-menu.html

<div class="navTrigger">
		<i></i><i></i><i></i>
</div>

toggle-mobile-menu.js

$(".navTrigger").click(function () {
		$('.main-menu-group').toggleClass("active");
		$(this).toggleClass("active");
	});