<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header>
<div id="navLogo"><a href=""><img src="https://img.favpng.com/9/25/22/logo-graphic-design-interior-design-services-art-png-favpng-S9Kunp9En6GnvGwjHeQhq27LM.jpg" /></a></div>
<svg class="hamburger" viewBox="0 0 80 80">
<line class="line01" x1="0" y1="3" x2="80" y2="3" />
<line class="line02" x1="0" y1="40" x2="80" y2="40" />
<line class="line03" x1="0" y1="77" x2="80" y2="77" />
</svg>
</header>
<div class="menu">
<nav class="navigation">
<ul>
<li><a class="" href="">Portfolio</a></li>
<li><a class="" href="">About</a></li>
<li><a class="" href="">Blog</a></li>
</ul>
</nav>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script>
var $hamburger = $('.hamburger');
TweenLite.set('.line01',{x:40});
TweenLite.set('.line03',{x:-40});
TweenLite.set('.navigation',{xPercent:-50, yPercent:-50})
TweenLite.set('.navigation li',{x:-110});
var hamburgerMotion = new TimelineMax()
.to('.line03',0.4,{x:'-=40'},0)
.to('.line01',0.4,{x:'+=40'},0)
.to('.menu',0.4,{autoAlpha:1},0)
.staggerTo('.navigation li',0.4,{x:0,ease: Sine.easeOut},0.2,0.5)
.to('.navigation li',1,{marginBottom:'40px', ease: Power1.easeOut})
.reverse()
$hamburger.on('click', function(e) {
hamburgerMotion.reversed(!hamburgerMotion.reversed());
});
</script>
body {
margin: 0;
background-color:grey;
font-family:sans-serif;
}
header{
position: relative;
width: 95%;
height: 55px;
margin: 20px 5% 0 0;
}
header img{
width:110px;
}
#navLogo{
position: absolute;
width: 100px;
float: left;
font-size: 40px;
line-height: 40px;
font-weight: 800;
margin-left:30px;
z-index:2;
}
a{
text-decoration: none;
color:white;
}
.hamburger{
position: absolute;
top: 6px;
left: auto;
right: 0px;
width: 32px;
cursor:pointer;
z-index:2;
}
.hamburger line{
stroke:white;
stroke-width: 6px;
}
.menu{
position:absolute;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:cyan;
visibility:hidden;
z-index:1
}
.navigation{
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
}
.navigation ul{
margin: 0;
padding: 0;
}
.navigation li{
list-style-type: none;
font-size:30px;
margin-bottom:0px;
}
.navigation a:hover{
color:black;
}
