So i was building a burger menu responsive navbar. I finished up most of the working but i got stuck at one point. The problem is i have applied the javascript onClick event listener on the div .burger so that it changes the opacity of the .nav-container to 1. Up until to this point this works fine. The problem is this click event only works in some areas on the .burger. Like if clicked on of the lines in it or somewhere to the right. I can't seem to find the problem. Can someone help me with this? Thanks in advance.
Here is my code
function showNav() {
var nav = document.getElementById("nav");
nav.classList.add("show-nav");
}* {
margin: 0px;
padding: 0;
box-sizing: border;
}
.container {
display: flex;
margin-top: 2%;
}
header {
position: relative;
z-index: 1;
}
.line1,
.line2,
.line3 {
width: 40px;
height: 8px;
background-color: black;
margin-top: 3px;
}
.nav-heading {
flex: 4;
margin-left: 5%;
}
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
}
.nav-container {
position: absolute;
width: 100%;
opacity: 0;
transition: .2s ease-in-out;
transform: translateY(-20%);
transform-origin: left;
ul {
display: flex;
flex-direction: column;
background-color: blue;
width: 100%;
align-items: center;
list-style-type: none;
li {
flex: 1;
padding: 15px;
}
}
}
.show-nav {
opacity: 1;
transform: translateY(20%);
}<header>
<div class="container">
<div class="nav-heading">
<h1>Navbar</h1>
</div>
<div class="burger" onclick="showNav()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="nav-container" id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</header>Just put z-index = 1 on .burger.
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
z-index: 1;
}
to bring your menu up front , you can add position:relative + z-index:1; to make sure it stands on top.
You also add the rule cursor: pointer; to show it is a clickable element :)
For the class you add, you could use classList . toggle() , so it shows/hides alternatively.
example
function showNav() {
var nav = document.getElementById("nav");
nav.classList.toggle("show-nav");
}* {
margin: 0px;
padding: 0;
box-sizing: border;
}
.container {
display: flex;
margin-top: 2%;
}
header {
position: relative;
z-index: 1;
}
.line1,
.line2,
.line3 {
width: 40px;
height: 8px;
background-color: black;
margin-top: 3px;
}
.nav-heading {
flex: 4;
margin-left: 5%;
}
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
cursor: pointer;
position:relative;
z-index:1
}
.nav-container {
position: absolute;
width: 100%;
opacity: 0;
transition: .2s ease-in-out;
transform: translateY(-20%);
transform-origin: left;
}
ul {
display: flex;
flex-direction: column;
background-color: blue;
width: 100%;
align-items: center;
list-style-type: none;
}
li {
flex: 1;
padding: 15px;
}
li a {
color: black;
}
.show-nav {
opacity: 1;
transform: translateY(20%);
}<header>
<div class="container">
<div class="nav-heading">
<h1>Navbar</h1>
</div>
<div class="burger" onclick="showNav()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="nav-container" id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</header>Just change the width of
.nav-container {
width: 30%;
}
so it doesn't overlap the burger. In general your CSS structure is not good.