My burger icon is not displaying the navigation menu

Question

My burger div is not showing the navigation menu.

I have tried to address the problem by changing functions in JS and the way I do them but still menu not displaying when you reduce the page size to 812px or less ( media queries).

HTML

<header>
          <nav>
            <div class="aw-container">
              <a href="Home.html"><img class="logo" src="img/logo.jpg"  width="60" height="50" alt="logo"></a>
              <div id="nav-class" class="aw-burger-open">
              <ul class="aw-navigation">
                <li><a class="aw-section-home" href="#">Home</a></li>
                <li><a class="aw-section-blog" href="#aw-blog">Blog</a></li>
                <li><a class="aw-section-link" href="#aw-contact">Travel</a></li>
                <li><a class="aw-section-newsletter" href="#aw-newsletter">Contact</a></li>
                <li><a class="aw-section-study" href="#aw-study">Planning</a></li>
                <li><a class="aw-section-search" href="aw-search">Search</a></li>
              </ul>
            </div>
                  <form class="searchbar" method="get">
                    <input type="text" id="s" placeholder="Search" name="search">
                    <div class=" close-icon">
                      <button type="button"><i class="fa fa-close"></i></button>
                  </div>
                </form>
                <div id = "burger-menu" class="burger" onclick="myFunction(this);toggleDropdown(this);">
                  <div class="bar1"></div>
                  <div class="bar2"></div>
                  <div class="bar3"></div>
                </div>
              </nav>
          </header>

CSS

@media screen and (max-width: 812px) {

    ul.aw-navigation{
      visibility: hidden;
    }

    #nav-class{
      display: flex;
      flex-direction: column;
    }

    /*Burger Menu */

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

    .bar1, .bar2, .bar3 {
      width: 20px;
      height: 2px;
      background-color: #333;
      margin: 6px 0;
      transition: 0.4s;
    }

    .change .bar1 {
      -webkit-transform: rotate(-45deg) translate(-4px, 3px);
      transform: rotate(-45deg) translate(-4px, 3px);
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
      -webkit-transform: rotate(45deg) translate(-8px, -8px);
      transform: rotate(45deg) translate(-8px, -8px);
    }

}

JS

//Burger//

function myFunction(x) {
  x.classList.toggle("change");
}

function toggleDropdown() {
  document.getElementById("nav-class").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.burger')) {
    var dropdowns = document.getElementById("nav-class");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

No error is displayed in the console.

myFunction() which changes the burger to X icon still working - toggleDropdown() doesn't.

Thanks in advance!

Answer 1

1- <div class="aw-container"> tag not closed. 2-add class show. 3- document.getElementByID always return a param so you can not use for loop.

Answer 2

I think you forgot the show class in CSS code

.show ul.aw-navigation{
visibility: visible;

}

Here is the code pen I tried

https://codepen.io/sarang13579/pen/MMPmyx

You can find more attractive nav tag hamburger menu implementation on w3schools or codepen by just googling