Hamburger Navmenu problems-CodePudding

I am creating a website and there seems to be a problem with the hamburger menu. I have a basic hamburger navbar but I have to hold the hamburger icon to activate the hamburger menu. Still, the nav menu doesn't appear after clicking/holding the hamburger icon!

const hamburger = document.getElementsByClassName('hamburger-menu')[0];
const navLinks = document.getElementsByClassName('navlinks')[0];
hamburger.addEventListener('click', () => {
  hamburger.classlist.toggle("open");
  navLinks.classlist.toggle("open");
});

@import url("https://fonts.googleapis.com/css2?family=Plus Jakarta Sans&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Plus Jakarta Sans", sans-serif;
}

body {
  background-color: #f2e5d7;
}

a {
  text-decoration: none;
}

.navbar {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3a3e59;
  box-shadow: 1px 1px 7px 4px grey;
}

.logo {
  width: 50%;
  display: flex;
  align-items: center;
}

.logo img {
  border-radius: 50%;
  width: 4rem;
}

.nkc {
  margin-left: 20px;
  font-weight: 600;
  letter-spacing: 1.5px;
  font-size: 17px;
}

.hamburger-menu {
  display: none;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #f75435;
  margin: 2.5px;
}

.navlinks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  top: 95px;
  position: fixed;
  right: -100%;
  background-color: #3a3e59;
  padding: 1rem 3.5rem;
  height: 20%;
  transition: all 0.3s ease-in-out;
}

.navlinks li a {
  color: #f75435;
  font-size: 17px;
}

.hamburger-menu.open .bar:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger-menu.open .bar:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.open .bar:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

.navlinks.open {
  right: 1rem;
}

@media screen and (max-width: 768px) {
  .hamburger-menu {
    display: flex;
    flex-direction: column;
  }
}

<body>
  <header >
    <nav >
      <div >
        <img src="assets/logo.jpg" alt="Nikhil Codes">
        <h5 >Nikhil Codes</h5>
      </div>

      <ul >
        <li ><a href="index.html">Home</a></li>
        <li ><a href="about.html">About</a></li>
        <li ><a href="contact.html">Contact</a></li>
      </ul>
      <div >
        <span ></span>
        <span ></span>
        <span ></span>
      </div>
    </nav>
  </header>
  <script src="scripts.js"></script>
</body>

CodePudding user response：

Just a bunch of syntax errors and issues with your CSS. I've edited them and marked up the changes I've made below.

//added the code to the onl oad event so you can put the script wherever you like and not be restricted to putting it at the end of your html
window.onload = () => {
  const hamburger = document.querySelector('.hamburger-menu'); //Changed this to querySelector so you don't need to get the 1st item
  const navLinks = document.querySelector('.navlinks'); //ditto
  hamburger.addEventListener('click', () => {
    hamburger.classList.toggle("open"); //Was classlist, not classList (note the capital L)
    navLinks.classList.toggle("open");
  });
}

@import url("https://fonts.googleapis.com/css2?family=Plus Jakarta Sans&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Plus Jakarta Sans", sans-serif;
}

body {
  background-color: #f2e5d7;
}

a {
  text-decoration: none;
}

.navbar {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3a3e59;
  box-shadow: 1px 1px 7px 4px grey;
  color: white;
  /* added a colour here so I could see what's going on' */
}

.logo {
  width: 50%;
  display: flex;
  align-items: center;
}

.logo img {
  border-radius: 50%;
  width: 4rem;
}

.nkc {
  margin-left: 20px;
  font-weight: 600;
  letter-spacing: 1.5px;
  font-size: 17px;
}

.hamburger-menu {
  /* display: none; */
  display: flex;
  /*changed this to display flex to stack the bars on top of each other */
  flex-direction: column;
  /*stack the bars using this */
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

.bar {
  display: inline-block;
  /*added this to make the width & height attributes effective */
  width: 25px;
  height: 3px;
  background-color: #f75435;
  margin: 2.5px;
}

.navlinks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  top: 95px;
  position: fixed;
  right: -100%;
  background-color: #3a3e59;
  padding: 1rem 3.5rem;
  height: fit-content;
  /* changed this to fit content as the menu spills out of the bottom at small screen heights */
  transition: all 0.3s ease-in-out;
}

.navlinks li a {
  color: #f75435;
  font-size: 17px;
}

.hamburger-menu.open .bar:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger-menu.open .bar:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.open .bar:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

.navlinks.open {
  right: 1rem;
}

@media screen and (max-width: 768px) {
  .hamburger-menu {
    display: flex;
    flex-direction: column;
  }
}

<header >
  <nav >
    <div >
      <img src="assets/logo.jpg" alt="Nikhil Codes">
      <h5 >Nikhil Codes</h5>
    </div>

    <ul >
      <li ><a href="index.html">Home</a></li>
      <li ><a href="about.html">About</a></li>
      <li ><a href="contact.html">Contact</a></li>
    </ul>
    <div >
      <span ></span>
      <span ></span>
      <span ></span>
    </div>
  </nav>
</header>

CodePudding user response：

Do you want to activate the hamburger on holding, or activate it by clicking?