I started to add some JS but the script isn’t working and I’m not sure what I can do from here to make it work. So the code is supposed to listen for the click event and in turn either open or close the menu depending on its position. The id is used so that if the hamburger menu is clicked the menu will slide out 100%. The X is then on the menu to close the menu, however, when I press the hamburger icon the menu isn’t sliding in, and when it’s tested with the menu out the X isn’t closing it.
const menuTrigger = document.getElementById('trigger'); //1
menuTrigger.addEventListener("click", open); //5
const closeMenu = document.getElementById("closer"); //2
closeMenu.addEventListener("click", closed); //3
const sideMenu = document.getElementById('side-menu'); //4
function open() {
sideMenu.classList.add("show");
}
function closed() {
sideMenu.classList.remove("show");
}.show {
opacity: 1;
transform: translateX(0%);
background-color: white;
}
#side-menu {
position: fixed;
opacity: 1;
transform: translateX(100%);
z-index: 20;
background-color: #edeae5;
top: 0;
right: 0;
height: 100vh;
width: 20%;
transition: transform 0.5s ease-in-out;
}<div class="nav-right">
<ul>
<li> <a href="#nav"> Home </a> </li>
<li> <a href=# services> Services </a> </li>
<li> <a href="#team"> Meet The Team</a> </li>
<li> <a href="#philosophy"> Philosophy</a> </li>
<li id="trigger"> <svg class="hamburger" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" style=" fill:#FFFFFF;"><path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"></path></svg> </li>
</ul>
</div>
<aside id="side-menu">
<div class="side-head">
<h1 id="side-img">
CLIK
</h1>
<div class="side-right">
<h1 id="closer">
X
</h1>
</div>
</div>
<div class="side-menu-links">
<ul>
<li class="side-menu-indv-link"> <img class="side-link-img" src="serv-black.png" alt=""> <a href="#services">Services</a></li>
<li class=" side-menu-indv-link"> <img class="side-link-img" src="team-balck.png" alt=""><a href="#team">Meet The Team</a></li>
<li class=" side-menu-indv-link"> <img class="side-link-img" src="phil-black.png" alt=""><a href="#philosophy">Philosophy</a></li>
</ul>
</div>
<hr>
<div class="side-menu-contact">
<div class="side-menu-links">
<ul>
<li class="side-menu-indv-link"> <img class="side-link-img" src="fb2.png" alt=""> <a href="#">Facebook</a></li>
<li class="side-menu-indv-link"> <img class="side-link-img" src="instagram2.png" alt=""> <a href="#">Instagram</a></li>
<li class="side-menu-indv-link"> <img class="side-link-img" src="whatsapp.png" alt=""> <a href="#">Whatspp</a></li>
</ul>
<hr>
</div>
</div>
</aside>>Solution :
Your primary problem is that id selectors in CSS have higher specificity than class selectors, so .show on its own can’t override the transform (or anything else) that’s declared in #side-menu.
Adding the id to the selector in the CSS, making it #side-menu.show instead of just .show gives it higher specificity so its rules can override the ones in #side-menu.
/* do this */
#side-menu.show {
}
/* instead of this */
.show {
}
const menuTrigger = document.getElementById('trigger'); //1
menuTrigger.addEventListener("click", open); //5
const closeMenu = document.getElementById("closer"); //2
closeMenu?.addEventListener("click", closed); //3
const sideMenu = document.getElementById('side-menu'); //4
function open() {
sideMenu.classList.toggle("show");
}
function closed() {
sideMenu.classList.remove("show");
}#side-menu.show {
opacity: 1;
transform: translateX(0%);
background-color: white;
}
#side-menu {
position: fixed;
opacity: 1;
transform: translateX(100%);
z-index: 20;
background-color: #edeae5;
top: 0;
right: 0;
height: 100vh;
width: 20%;
transition: transform 0.5s ease-in-out;
}<div class="nav-right">
<ul>
<li> <a href="#nav"> Home </a> </li>
<li> <a href=# services> Services </a> </li>
<li> <a href="#team"> Meet The Team</a> </li>
<li> <a href="#philosophy"> Philosophy</a> </li>
<li id="trigger"> <svg class="hamburger" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" style="fill:red;"><path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"></path></svg> </li>
</ul>
</div>
<aside id="side-menu">
<div class="side-head">
<h1 id="side-img">
CLIK
</h1>
<div class="side-right">
<h1 id="closer">
X
</h1>
</div>
</div>
<div class="side-menu-links">
<ul>
<li class="side-menu-indv-link"> <img class="side-link-img" src="serv-black.png" alt=""> <a href="#services">Services</a></li>
<li class=" side-menu-indv-link"> <img class="side-link-img" src="team-balck.png" alt=""><a href="#team">Meet The Team</a></li>
<li class=" side-menu-indv-link"> <img class="side-link-img" src="phil-black.png" alt=""><a href="#philosophy">Philosophy</a></li>
</ul>
</div>
<hr>
<div class="side-menu-contact">
<div class="side-menu-links">
<ul>
<li class="side-menu-indv-link"> <img class="side-link-img" src="fb2.png" alt=""> <a href="#">Facebook</a></li>
<li class="side-menu-indv-link"> <img class="side-link-img" src="instagram2.png" alt=""> <a href="#">Instagram</a></li>
<li class="side-menu-indv-link"> <img class="side-link-img" src="whatsapp.png" alt=""> <a href="#">Whatspp</a></li>
</ul>
<hr>
</div>
</div>
</aside>