I'm struggling to get my hamburger icon to reveal the navigation bar when clicked. The icon itself functions properly and adapts to different screen sizes, but the overlay remains stationary.
Check out my code on JSFiddle!
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
z-index: 3;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<div class="overlay-content">
<h4>
<a href="https://www.invictusbaby.co.uk/">Home</a><br>
<a href="https://www.invictusbaby.co.uk/invictus-v-plus">V-Plus</a><br>
<a href="https://www.invictusbaby.co.uk/carbon-edition">Carbon Edition</a><br>
<a href="https://www.invictusbaby.co.uk/special-edition">Special Edition</a><br></h4>
</div>
</div>
<div class="container" onclick="toggleIcon(this);runNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function toggleIcon(x) {
x.classList.toggle("change");
}
function runNav() {
if (document.getElementById("myNav").style.height == "0%") {
document.getElementById("myNav").style.height = "100%";
} else {
document.getElementById("myNav").style.height = "0%";
}
}
</script>
Even after adjusting the overlay to 100% manually for previewing purposes, I found that the hamburger icon would become unresponsive. It seemed as though the interaction was impaired.
In an attempt to rectify the issue, setting ("myNav").style.height = "5%"}; caused the overlay to obstruct the icon, preventing any interaction in that region.