响应式菜单不会弹出

Question

my code is here

https://codepen.io/bunea-andrei/pen/ZEeeWPK

I'm talking about the mobile view of the website, please make the screen smaller until it changes to the stance I'm referring to

I assume it's something wrong with my JavaScript code and I spent the last 3 hours trying to figure out what is it

Code is here

 const wrapperSlide = () => { const burger = document.querySelector(".burger"); const wrapper = document.querySelector(".wrapper"); burger.addEventListener("click", () => { wrapper.classList.toggle("wrapper-active"); burger.classList.toggle("toggle"); }); } wrapperSlide();

 /* top side with the logo and info */ top{ height:140px; width: 100%; background: #fff; display:block; } top.left-side { margin-left: 450px; text-align: left; padding: 20px; display: inline-block; font-family: 'Anton', sans-serif; } top.left-side li{ letter-spacing: 2px; line-height:1.2em; } top.right-side { margin-right:450px; text-align: left; padding-top: 30px; float:right; } top li{ list-style: none; line-height:1.1em; } /* navigation menu */ menu { width: 100%; background: black; height: 90px; border-bottom: 22px solid red; } menu.wrapper { display: flex; justify-content: space-around; /*play with the width and padding to split out the categories more*/ width: 50%; padding: 10px 485px; } menu.line{ /* the separation lines between the categories */ width:1px; height:70px; background:grey; } menu span { /* editing the writing of the menu bar*/ color: white; font-size: 25px; margin-top: 30px; } menu span a:link { /* removing the underline and set a color for the link to change it from blue*/ text-decoration: none; color: white; } menu span a:visited{ /* makes the color of the links stay the same after clicking */ color:inherit; } menu.box { /* creating the box in which i will put each item of the menu*/ width: 180px; height: 70px; text-align:center; line-height:65px; } menu.box:hover { background-color: green; } menu.burger div{ width:25px; height:3px; display:none; background-color: #97903f; } @media only screen and (max-width: 415px) { menu { width: 100%; border-bottom: none; max-height: 35px; margin-top: -170px; /* to reverse the top with the menu*/ padding-top: 15px; /* to move the burger lines a bit down from the top of th menu */ background-color: rgb(35 22 68 / 0.94); } menu.burger div { /* editing the burger lines */ display: flex; margin-bottom: 5px; margin-left: 15px; } top { margin-top: 30px; /* to get it further down from the top so i can replace it with the menu */ } top.left-side { margin-left: 10px; display: block; text-align: center; } top.right-side { display: block; text-align: center; margin: 0 auto; margin-top: -40px; margin-right: 70px; } menu.wrapper { margin-top: -207px; width: 200px; height: 569px; padding:0px; display: inline-block; background-color: rebeccapurple; padding-left: 20px; transform: translateX(-100%); transition: transform 0.5s ease-in; } menu.line{ /* modify the separation line from vertical display to horizontal */ height:1px; width:220px; margin-left:-20px; }.wrapper-active { transform: translateX(0%); }.toggle.line1 { transform: rotate(-45deg) translate(-5px, 6px); }.toggle.line2 { opacity: 0; }.toggle.line3 { transform: rotate(45deg) translate(-5px, -6px); } }

 <top> <div class="left-side"> <ul> <li style="font-size:50px; color:#0094ff; letter-spacing: 4px; ">ROXIRALU</li> <li>DERATIZEZ TOT CE MISCA VERISORU' TE PUP</li> <li>SPECIALIST xD</li> </ul> </div> <div class="right-side"> <ul> <li style="font-size:25px; color:#000000; letter-spacing:1px; font-family: 'Anton', sans-serif; padding-bottom:2px;">Suna 08763575321</li> <li>Luni-Vineri 12:00-24:00</li> <li>Sambata-Duminica INCHIS</li> <li>Da-mi email la: sagunu@salam.hd</li> </ul> </div> </top> <menu> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> <div class="wrapper"> <div class="line"></div> <div class="box"> <span> <a href="#">Soareci</a> </span> </div> <div class="line"></div> <div class="box"> <span> <a href="#">Gaze</a> </span> </div> <div class="line"></div> <div class="box"> <span> <a href="#">Fantome</a> </span> </div> <div class="line"></div> <div class="box"> <span> <a href="#">Purici</a> </span> </div> <div class="line"></div> <div class="box"> <span> <a href="#">Otravuri</a> </span> </div> <div class="line"></div> <div class="box"> <span> <a href="#">Cozonaci</a> </span> </div> <div class="line"></div> <div class="box"> <span> <a href="#">Prafuri</a> </span> </div> <div class="line"></div> <div class="box"> <span> <a href="#">Contact</a> </span> </div> <div class="line"></div> </div> </menu> <script src="js/index.js"></script> </html>

Answer 1

The specificity for the selector .wrapper-active that is applying the transform to show the navigation has a lower specificity value than menu.wrapper , which is also defining a transform. This is causing the transform: translateX(-100%); to take over.

Adding more specificity to the active class should do the trick:

.wrapper.wrapper-active {
  transform: translateX(0);
}