Hamburger Navmenu problems

Nikhil Codes 0
Viewed 40

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 class="header">
    <nav class="navbar">
      <div class="logo">
        <img src="assets/logo.jpg" alt="Nikhil Codes">
        <h5 class="nkc">Nikhil Codes</h5>
      </div>

      <ul class="navlinks">
        <li class="nav-link"><a href="index.html">Home</a></li>
        <li class="nav-link"><a href="about.html">About</a></li>
        <li class="nav-link"><a href="contact.html">Contact</a></li>
      </ul>
      <div class="hamburger-menu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </nav>
  </header>
  <script src="scripts.js"></script>
</body>
hamburger-menu javascript css html
1 Answers

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 onload 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 class="header">
  <nav class="navbar">
    <div class="logo">
      <img src="assets/logo.jpg" alt="Nikhil Codes">
      <h5 class="nkc">Nikhil Codes</h5>
    </div>

    <ul class="navlinks">
      <li class="nav-link"><a href="index.html">Home</a></li>
      <li class="nav-link"><a href="about.html">About</a></li>
      <li class="nav-link"><a href="contact.html">Contact</a></li>
    </ul>
    <div class="hamburger-menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </nav>
</header>

userurKQ0
Related