mobile version of my website burger button doesn't drop down

Question

So I'm trying to make a navbar and make the mobile version of it following a tutorial but the burger drop down is not working .I spent hours trying to figure this out but I cant find what's wrong

const navSlide = () => {

  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-links");

  burger.addEventListener("click", function() {
    nav.classList.toggle('nav-active');
  });
}

navSlide();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: 'Poppins', sans-serif;
  background-color: #5d4954;
  min-height: 8vh;
}

.logo {
  color: rgb(196, 194, 194);
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 50%;
  padding-right: 0px;
  font-weight: bold;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: rgb(196, 194, 194);
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 14px;
}

.burger div {
  background-color: rgb(196, 194, 194);
  margin: 5px;
  width: 25px;
  height: 3px;
}

.burger {
  display: none;
  cursor: pointer;
}

@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #5d4954;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
  }
}

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


/*                                  
@media  screen and(max-width:1024px){
   .nav-links{
        width: 60%;
        }
 }*/

<html lang="en">

<head>
  <script src="app.js"></script>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>navbar</title>
  <link rel="stylesheet" href="style.css">
  <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@200&display=swap" rel="stylesheet">
</head>

<body>
  <nav class="nav">

    <div class="logo">
      <p>my nav</p>

    </div>

    <ul class="nav-links">
      <li class="el"><a href="#">Home</a></li>
      <li class="el"><a href="#">About</a></li>
      <li class="el"><a href="#">work</a></li>
      <li class="el"><a href="#">projects</a></li>
    </ul>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>

    </div>

  </nav>
</body>

</html>

the JavaScript looks fine cause I traced it word for word, but its the CSS I'm kind of worried about maybe there is a problem in the media queries I made. thanks in advance :)

i realized that it runs well here when you click run snippet but it doesn't in chrome using live server in vscode, what is the problem???

In the snippet, the burger menu is working - as in sliding out. Can you be more specific about what "not working" means? — disinfor, Feb 12 '22 at 14:36
@disinfor i want the navbar to appear when the burger button is clicked like home, about,work and projects these are the name of the links i want to appear — Mame1, Feb 12 '22 at 14:44
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — disinfor, Feb 12 '22 at 21:08

KJEK-Code · Answer 1 · 2022-02-12T15:41:21.317

The opacity of your .nav-links li never changes when you change it to active you can either remove .nav-links li { opacity: 0; } or give them the opacity when the list is active as I have done below.

EDIT: I do not see a link to your JavaScript in your HTML file. If it is working on stack overflow and not in your local files make sure you have properly linked your HTML and JavaScript files together by either having the JavaScript just before the closing body tag or add in a link to your script.js before your closing body tag. <script src="script.js"></script>

/* script.js */ 

const navSlide = () => {

  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-links");

  burger.addEventListener("click", function() {
    nav.classList.toggle('nav-active');
  });
}

navSlide();

/* style.css */ 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: 'Poppins', sans-serif;
  background-color: #5d4954;
  min-height: 8vh;
}

.logo {
  color: rgb(196, 194, 194);
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 50%;
  padding-right: 0px;
  font-weight: bold;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: rgb(196, 194, 194);
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 14px;
}

.burger div {
  background-color: rgb(196, 194, 194);
  margin: 5px;
  width: 25px;
  height: 3px;
}

.burger {
  display: none;
  cursor: pointer;
}

@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #5d4954;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }

  .nav-links li {
    opacity: 0;
  }

  .burger {
    display: block;
  }
}

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

/* changes opacity of li when active */
.nav-active li {
  opacity: 1;
}


/*                                  
@media  screen and(max-width:1024px){
   .nav-links{
        width: 60%;
        }
 }*/

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>navbar</title>
  <link rel="stylesheet" href="style.css">
  <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@200&display=swap" rel="stylesheet">
</head>

<body>
  <nav class="nav">

    <div class="logo">
      <p>my nav</p>

    </div>

    <ul class="nav-links">
      <li class="el"><a href="#">Home</a></li>
      <li class="el"><a href="#">About</a></li>
      <li class="el"><a href="#">work</a></li>
      <li class="el"><a href="#">projects</a></li>
    </ul>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>

    </div>

  </nav>
  <script src="script.js"></script>
</body>

</html>

the opacity isn't the problem I did it purposely. the code runs fine here on stack overflow but try it on live server using vscode the button doesn't work at all — Mame1, Feb 12 '22 at 15:05
@Mame1 I placed it in VSCode and ran it on live server and the click functionality works as I would expect it to. How are you linking your JavaScript file? I do not see a `script src` in your html file so I placed the JavaScript just before the closing body tag. If you console log something in your click function does that work? — KJEK-Code, Feb 12 '22 at 15:24
apparently my code worked when i inserted the js into the body using script so I realized the js executed before the page loaded so i added defer in the js link like this and it worked, you gave me the hint so thanks :) — Mame1, Feb 12 '22 at 16:04

mobile version of my website burger button doesn't drop down

1 Answers1