Hi guys I am having a problem with my hamburger button and I don't know what to do any help would be appreciated.
Here is the hamburger buttton
const hamburger = document.querySelector('.ham-btn');
const overlay = document.querySelector('.over');
const menu = document.querySelector('.main-overlay-menu');
const cancel = document.querySelector('.cancel');
hamburger.addEventListener('click', () => {
overlay.style.display = 'flex';
menu.style.display = 'block';
});
cancel.addEventListener('click', () => {
overlay.style.display = 'none';
});.over { display: none; }<nav>
<button type="button" class="ham-btn">
show overlay
</button>
</nav>
<div class="over">
<div class="cancel">
<a href="#">Hide overlay</a>
</div>
<ul class="main-overlay-menu">
<li>
<a class="menu-item" href="#grid-containers">Portofolio</a>
</li>
<li>
<a class="menu-item" href="#about">About</a>
</li>
<li>
<a class="menu-item" href="#contactpage">Contact</a>
</li>
</ul>
</div>my css
header {
padding: 0 35px;
display: flex;
justify-content: space-between;
align-items: center;
}
.ham-btn{
background: white;
color: #3a4a42;
border: 1px lightgrey solid;
border-radius: 5px;
width: 25%;
height: 100%;
cursor:pointer;
}
.union {
margin-right: 6em;
}
Hey, I just updated my CSS really I have no idea what the problem is because I have used this code before and it worked. Maybe you guys advice another way to display the elements