$(function() {
$("#hamburger").on("click", function() {
$(this).toggleClass("close");
$("#nav").toggleClass("visible");
});
});
/* ADDED */
body {
overflow-x: hidden;
}
.myHeader {
background: #2e3047;
}
#hamburger {
height: 50px;
width: 50px;
background: #3bba9c;
position: absolute;
overflow: hidden !important;
top: 20px;
right: 20px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 4px rgba(0, 0, 0, 0);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2 ease;
z-index: 9999;
}
#hamburger:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
}
#hamburger span {
display: block;
background-color: #2e3047;
position: absolute;
height: 2px;
width: 28px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
border-radius: 10px;
transition: all 0.15s ease;
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
}
#hamburger span:first-child {
top: 17px;
}
#hamburger span:nth-child(2) {
top: 25px;
}
#hamburger span:last-child {
top: 33px;
}
#hamburger.close {
top: 10px;
right: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
#hamburger.close span:first-child {
top: 15px;
transform: translate(-14px, 10px) rotate(135deg);
-webkit-transform: translate(-14px, 10px) rotate(135deg);
-moz-transform: translate(-14px, 10px) rotate(135deg);
}
#hamburger.close span:nth-child(2) {
left: -20px;
opacity: 0;
}
#hamburger.close span:last-child {
top: 15px;
transform: translate(-14px, 10px) rotate(-135deg);
-webkit-transform: translate(-14px, 10px) rotate(-135deg);
-moz-transform: translate(-14px, 10px) rotate(-135deg);
}
#nav {
height: 100vh;
right: 0;
top: 0;
background: #3bba9c;
color: #2e3047;
width: 200px;
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
position: absolute;
overflow: hidden !important;
z-index: 1;
transform: translateX(200px);
-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
opacity: 0;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
}
#nav ul {
list-style: none;
padding: 0;
}
#nav ul li a {
display: block;
text-decoration: none;
padding: 20px;
color: #2e3047;
}
#nav ul li a:hover {
color: #fafbff;
}
#nav.visible {
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myHeader">
<div id="hamburger" class="visible">
<span></span>
<span></span>
<span></span>
</div>
<div id="nav" class="close">
...
</div>
</div>