Whenever I click the burger_btn, it changes to cross_btn. however, the list menu fails to appear on the screen. In an attempt to debug this issue, I inserted console.log() statements at the beginning and end of both functions. Surprisingly, the console.log() messages were being displayed in the console without any errors...
document.addEventListener("DOMContentLoaded", function() {
const burger_btn=document.querySelector("#burger");
const cross_btn=document.querySelector("#cross");
const list=document.querySelector(".header ul");
burger_btn.addEventListener('click',show);
cross_btn.addEventListener('click',hide);
function show(){
burger_btn.style.display="none";
cross_btn.style.display="block";
list.classList.add("open");
}
function hide(){
burger_btn.style.display="block";
cross_btn.style.display="none";
list.classList.remove("open");
}
});*{
margin:0;
padding:0;
font-family:'Poppins',Arial, Courier, monospace;
}
:root{
--blackish:#1f2833;
--creamish:#fffdd0;
}
.open {
display:block;
position: absolute;
background-color: var(--blackish);
color: var(--creamish);
width: 100%;
height: 25rem;
text-align: center;
font-size: 5rem;
}
@media only screen and (max-width:360px){
.header ul{
display:none;
}
.list #burger{
display:block;
}
}<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<div class="header white" id="header">
<div class="header white" id="header">
<div class="logo">
<a href="#"><img src="/logo/logo 1.png" alt="logo"></a>
</div>
<div class="list">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Contact</a></li>
</ul>
<i id="burger" class="fa-solid fa-bars"></i>
<i id="cross" class="fa-solid fa-xmark"></i>
</div>
</div>