Position absolute causing strange gap after hamburger menu - html

Question

I have a hamburger menu and I would like to be able to place it to the right of the browser. I have added position absolute to both the hamburger icon and the main menu, however when I do this it leaves a weird gap on the right.
Here is my code
$(function () {
$("#hamburger").on("click", function () {
$(this).toggleClass("close");
$("#nav").toggleClass("visible");
});
});
.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">
<ul>
<li>About</li>
<li>What I Do</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
I have tried adding overflow:hidden to both the hamburger icon and the nav menu but this doesn't seem to fix the problem.
I can't see any way of fixing this.

Answer 1

Add overflow-x: hidden to the body element. The problem is that the nav element has width - 200px - which is the exact width of horizontal scroll. Even though the nav is positioned absolute, and is out of the document flow, it doesn't take it out of the document calculation for width.
$(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">
<ul>
<li>About</li>
<li>What I Do</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>