Why isn't the exit icon showing when menu is clicked - html

Question

I have tried literally everything to try and make the exit icon show up on the menu by giving it an index of 999 but still no luck in making it show, any idea why it is not working?
I have added the JavaScript as well.
menuBtn.addEventListener('click' , () => {
const menu = document.querySelectorAll('.menu');
for(let el of menu){
el.style.display = 'block'
}
})
/*Navbar*/
.navbar {
width: 100%;
position: fixed;
font-family: "Ubuntu", sans-serif;
padding: 30px 0;
}
.navbar .logo a {
font-size: 2rem;
font-weight: 600;
color: white;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.sticky {
padding: 30px 0;
background-color: crimson;
}
.sticky .logo a span {
color: #fff;
}
.menu li {
display: inline-block;
list-style: none;
}
.menu li a {
color: #fff;
font-size: 1.1rem;
font-weight: 500;
margin-left: 35px;
padding-left: 5px;
transition: color 0.3s ease;
}
.menu li a:hover {
border-left: 3px solid white;
color: crimson;
}
.sticky .menu li a:hover {
color: white;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/*Menu Button*/
.fa.fa-bars.menuBtn {
color: #fff;
font-size: 35px;
cursor: pointer;
display: none;
}
.fa.fa-times-circle.exit {
color: white;
font-size: 35px;
cursor: pointer;
display: none;
}
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
.menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
display: none;
}
.fa.fa-times-circle.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
.menu ul li {
display: block;
}
.menu ul li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<header>
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
<!--Head Banner-->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span id="headSpan"><Developer></Developer></span></div>
</div>
</div>
</section>
</header>

Answer 1

Because it never made display:block when enter in small screen like you did for menubtn.
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
Do the same for exit icon under #media (max-width: 934px) also
.fa.fa-times-circle.exit {
display: inline-block;
}
And remove this code
.fa.fa-times-circle.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
Working example:
/*Navbar*/
body {
background-color: #ccc;
}
.navbar {
width: 100%;
position: fixed;
font-family: "Ubuntu", sans-serif;
padding: 30px 0;
}
.navbar .logo a {
font-size: 2rem;
font-weight: 600;
color: white;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.sticky {
padding: 30px 0;
background-color: crimson;
}
.sticky .logo a span {
color: #fff;
}
.menu li {
display: inline-block;
list-style: none;
}
.menu li a {
color: #fff;
font-size: 1.1rem;
font-weight: 500;
margin-left: 35px;
padding-left: 5px;
transition: color 0.3s ease;
}
.menu li a:hover {
border-left: 3px solid white;
color: crimson;
}
.sticky .menu li a:hover {
color: white;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/*Menu Button*/
.fa.fa-bars.menuBtn {
color: #fff;
font-size: 35px;
cursor: pointer;
display: none;
}
.fa.fa-times-circle.exit {
color: white;
font-size: 35px;
cursor: pointer;
display: none;
}
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
.fa.fa-times-circle.exit {
display: inline-block;
}
.menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
display: none;
}
.menu ul li {
display: block;
}
.menu ul li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<header>
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
<!--Head Banner-->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span id="headSpan"><Developer></Developer></span></div>
</div>
</div>
</section>
</header>