responsive navigation toggle menu issue

Question

I have been working on my portfolio website and I can't seem to get my responsive navigation working properly.

The normal navigation works fine, but the responsive navigation toggle menu presents issues on the mobile version. When the toggle is clicked it changes from the menu icon to the X icon, but the drop-down navigation menu doesn't appear.

I have been trying to solve this issue and cannot seem to find a solution. Any feedback would be appreciated, HTML, CSS & JavaScript below.

$(window).load(function() {
  $('span.nav-btn').click(function() {
    $('ul.nav').toggle();
  })

  $(window).resize(function() {
    if ($(window).width() > 660) {
      $('ul.nav').removeAttr('style')
    }
  })
});


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

nav {
  letter-spacing: 1.9px;
  float: right;
  padding: 10px;
  margin: 60px 150px 0px 0px;
}

.nav>li {
  display: inline-block;
}

.nav>li>a {
  color: #000;
  font-size: 12px;
  padding: 18px;
  transition: all 0.5s ease;
  text-transform: uppercase;
}

.nav>li>a:hover {
  color: #c3dbc5;
}

.nav .current {
  font-weight: bolder;
}

@media screen and (max-width: 900px) {
  nav {
    margin: 0px;
    padding: 0px;
  }
  .nav {
    display: none;
  }
  ul {
    padding: 0px;
  }
  .nav>li {
    margin-top: 50px;
    padding: 15px 0px 0px 15px;
    width: 100%;
    list-style: none !important;
    text-align: center;
  }
  .nav>li>a {
    font-size: 16px;
  }
  .container_nav {
    display: block;
    cursor: pointer;
    position: relative;
    padding: 50px;
    margin-top: 0px;
  }
  .container_nav.change {
    display: block;
    cursor: pointer;
  }
  .bar1,
  .bar2,
  .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
  }
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }
  .change .bar2 {
    opacity: 0;
  }
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
  }
}

<nav role="navigation" id="nav">
  <ul class="nav">
    <li><a href="index.htm" title="Work">Work</a></li>
    <li><a href="aboutme.htm" class="current" title="About">About</a></li>
    <li><a href="files/resume.pdf" target="_blank" title="Resume">Resume</a></li>
    <li><a href="contact.htm" title="Contact">Contact</a></li>
  </ul>

  <div class="container_nav" onclick="myFunction(this)">

    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>

    <span class="nav-btn"></span>
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

You need to change a couple of things in your code to get things done.

1. Get your nav hamburger icon out of the nav container.

2. The comment says it right, remove the onclick function from the container_nav div.

3. Replace your entire jquery code with

   $(document).ready(function () { $("div.container_nav").click(function () { $("div.container_nav").toggleClass("change"); $("ul.nav").toggleClass("toggle-menu"); }); });

4. You're adding .change both the time to the container_nav which isn't toggling the menu because nothing changes at .nav so rename your .container_nav.change class to .nav.toggle-menu.

The comment section is always open if you're stuck again.