On click JS function not running-CodePudding

I'm working on a project and using a code along to help me understand how to build an Nav Bar. I am using this tutorial: https://www.youtube.com/watch?v=gXkqy0b4M5g I've haven't gone past 22:05 in the video.

I've built out the HTML, CSS and first JavaScript function which is supposed to show the navbar when you click on the hamburger menu which we've built out of div's. I've built out the function in JavaScript, I am receiving no errors, and everything matches the video to a "T" and looks 100% right but for whatever reason it will not run the function when I click the hamburger menu.

console.log("Hello!");

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

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

navSlide();

nav .nav-links {
  position: absolute;
  right: 0px;
  height: 92vh;
  top: 8vh;
  background-color: #366576;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  transform: translateX(100%);
  transition: transform 0.5s ease-in;
}

nav .nav-links li {
  opacity: 0;
}

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


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

<nav class="navbar">
  <div class="logo">
    <h4>Logo</h4>
  </div>
  <ul class="nav-links">
    <li>
      <a href="#header">Home</a>
    </li>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#skills">Skills</a>
    </li>
    <li>
      <a href="#projects">Projects</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</nav>

I've been at this for over 24 hours now and I cannot for the life of me find anything wrong. Everything is linked and again, I am not seeing any errors. It works exactly like this on the video I was following along with. Anyone have any clue what's going on here?

CodePudding user response：

Looks like the classes line1, line2, and line3 are not defined and the "hamburger" occupies no screen space for you to click. I made .burger visible by:

<div class="burger">
  <div class="line1">---</div>
  <div class="line2">...</div>
  <div class="line3">---</div>
</div>

and added some logging:

burger.addEventListener('click', () => {
  console.log(nav.classList[1]);
  nav.classList.toggle('nav-active');
  console.log(nav.classList[1]);
});

If you click the "hamburger" repeatedly, the console should show alternating undefined and nav-active each time.

CodePudding user response：

You can play with the media query and the screen sizes.

const navSlide = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-links");
  const navLinks = document.querySelectorAll(".nav-links li");

  burger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');

    navLinks.forEach((link, index) => {
      if (link.style.animation){
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7   1.5}s`;
      }
    });

    burger.classList.toggle('toggle');
  });
}

navSlide();

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

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

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

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
}

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

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

.burger {
    display: none;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

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

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .nav-links {
        position: absolute;
        right: 0;
        height: 92vh;
        top: 8vh;
        background-color: #504954;
        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;
        cursor: pointer;
    }
}

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

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px,6px)
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px,6px)
}

<!DOCTYPE html>
<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">
    <link rel="stylesheet" href="style.css"/>
    <title>Document</title>
</head>
<body>
    <nav class="navbar">
        <div class="logo">
          <h4>Logo</h4>
        </div>
        <ul class="nav-links">
          <li>
            <a href="#header">Home</a>
          </li>
          <li>
            <a href="#about">About</a>
          </li>
          <li>
            <a href="#skills">Skills</a>
          </li>
          <li>
            <a href="#projects">Projects</a>
          </li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>

      <script src="app.js"></script>
</body>
</html>