Hamburger menu - why is my code not working?

Question

I'm trying to do a simple hamburger menu using jQuery or JS (I'm easy either way) but my code simply won't work and I can't for the life of me work out why.

It's structured as hamburger top left, logo in the middle then a profile and basket top right.

At the moment all I'm trying to do is literally get the nav list to appear on click and then I can style it however. I'm trying to do this using the .hidden class to display the nav as block when the burger is clicked.

Here's the code:

HTML:

       <section class="header-section">
  <div class="header-container">
   <div class="header-content">
     <div class="hamburger-container">
    <i id="burger" class="fas fa-bars fa-2x"></i>
     </div>
     <div class="header-logo-container">
       <h2>Logo goes here</h2>
     </div>
     <div class="header-profile-and-signin">
       <i class="fas fa-user-circle fa-2x"></i>
       <i class="fas fa-suitcase-rolling fa-2x"></i>
     </div>
       <ul id="nav">
          <li>
            <a href="search-page.html" style="text-decoration: none">Holidays</a>
          </li>
          <li>
            <a href="sign-in.html" style="text-decoration: none">Sign In / Register</a>
          </li>
        </ul>
    </div>
  </div>
</section>

CSS:

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

.header-section {
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #999;
}

.header-container {
  height: 100%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blue;
}

.header-content {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: yellow;
}

.hamburger-container {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  background-color: red;
}

.hamburger-container i {
  margin-left: 20px;
}

.header-logo-container {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: green;
}

.header-profile-and-signin {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#nav {
  list-style: none;
  display: none;
}

.hidden {
  display: block;
}

#burger {
  cursor: pointer;
}

jQuery:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script>

$("burger").click(function() {
  $("nav").toggleClass("hidden");
});

  </script>

Any help would be really appreciated. Thank you.

Answer 1

There's at least three issues in your code:

• $('burger') needs to be $('#burger') to include the id selector prefix
• Similarly, $('nav') needs to be $('#nav')
• .hidden in your CSS needs to be #nav.hidden so that it's specific enough to override the default style. I'd also suggest changing it to .visible to match its purpose, but that's purely a semantics issue.

The other possible issue is that you may need to add a document.ready event handler to your JS logic, depending on where you've placed it in the page. This will ensure the jQuery code executes after the DOM has been fully loaded.

jQuery(function($) {
  $("#burger").click(function() {
    $("#nav").toggleClass("hidden");
  });
});

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

.header-section {
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #999;
}

.header-container {
  height: 100%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blue;
}

.header-content {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: yellow;
}

.hamburger-container {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  background-color: red;
}

.hamburger-container i {
  margin-left: 20px;
}

.header-logo-container {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: green;
}

.header-profile-and-signin {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#nav {
  list-style: none;
  display: none;
}

#nav.hidden {
  display: block;
}

#burger {
  cursor: pointer;
}

<section class="header-section">
  <div class="header-container">
    <div class="header-content">
      <div class="hamburger-container">
        <i id="burger" class="fas fa-bars fa-2x">Burger</i>
      </div>
      <div class="header-logo-container">
        <h2>Logo goes here</h2>
      </div>
      <div class="header-profile-and-signin">
        <i class="fas fa-user-circle fa-2x"></i>
        <i class="fas fa-suitcase-rolling fa-2x"></i>
      </div>
      <ul id="nav">
        <li>
          <a href="search-page.html" style="text-decoration: none">Holidays</a>
        </li>
        <li>
          <a href="sign-in.html" style="text-decoration: none">Sign In / Register</a>
        </li>
      </ul>
    </div>
  </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>