Trouble with JS showing/opening hamburger menu-CodePudding

I've been having trouble figuring out what's missing in JS or HTML that's not causing the hamburger menu to show when clicked appropriately. I usually get an error with a permissions message but I've been able to use JS fine so this project is the only one I've been having problems with.

const hamburgerIcon = document.getElementsByClassName('hamburger-icon')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

hamburgerIcon.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

.brand-title {
  color: #000;
  margin-left: 2rem;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem;
}

.navbar-links ul {
  margin: 0;
  display: flex;
  padding: 0;
}

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

.navbar-links li a {
  text-decoration: none;
  color: #000;
  display: block;
  padding: 1rem 1.5rem;
}

.hamburger-icon {
  display: none;
  color: #000;
  cursor: pointer;
}

<nav >
  <div >LOGO</div>
  <a href="#" ><i ></i></a>

  <div >
    <ul >
      <li><a href='./pages/projects.html'>Projects</a></li>
      <li><a href=#>About</a></li>
      <li><a href=#>Contact</a></li>
    </ul>
  </div>
</nav>

CodePudding user response：

I cant see what U have done for showing menu. in fact there is no active class selector in UR css code if U did not used libs and it is a pure implementation pay more attention for what U want.

CodePudding user response：

You should fix your CSS code. Apply this code...

    const hamburgerIcon =
            document.getElementsByClassName('hamburger-icon')[0];
        const navbarLinks = document.getElementsByClassName('navbar-links')[0];

        hamburgerIcon.addEventListener('click', () => {
            navbarLinks.classList.toggle('active');
        });

.brand-title {
            color: #000;
            margin-left: 2rem;
        }
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem;
        }

        .navbar-links ul {
            margin: 0;
            display: flex;
            padding: 0;
        }

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

        .navbar-links li a {
            text-decoration: none;
            color: #000;
            display: block;
            padding: 1rem 1.5rem;
        }

        /* added code here */
        .hamburger-icon {
            display: none;
            color: #000;
            cursor: pointer;
        }
        
        .navbar-links.active  {
            display: block;
        }
        @media (max-width:768px) {
            .navbar-links {
                display: none;
            }
            .hamburger-icon {
                display: block; 
            }
        }

<nav >
            <div >LOGO</div>
            <a href="#" 
                >Hamburger</i
            ></a>

            <div >
                <ul >
                    <li><a href="./pages/projects.html">Projects</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </nav>