JavaScript function menu toggle

Question

Hi everyone hope you are all well, just wondering if someone could give me hand I have a nav bar that when screen is max-width 750px the nav links turn into toogle menu. My problem is I can't seem to get the toggle menu to open and close when I click on it,I have googled and tried a few different code sorces with no luck. Any help will be very appreciated.

This is my current code.

 $(document).ready(function() { $("menu-toggle").on("click", function() { $('nav').toggleClass('showing'); $('.nav ul').toggleClass('showing'); }); });

 header.menu-toggle { display: none; } /***** MEDIA QUERIES*****/ @media only screen and (max-width: 750px) { header { position: relative; } header ul { width: 100%; background: #666666; max-height: 0px; overflow: hidden; }.showing { max-height: 100em; } header ul li { width: 100%; } header ul li ul { position: static; display: block; width: 100%; } header ul li ul li a { padding: 10px; background: #666666; color: #ffffff; padding-left: 50px; } header ul li ul li a.logout { color: #ff0000; } header.menu-toggle { display: block; position: absolute; right: 20px; top: 20px; font-size: 1.9em; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css"> <header> <div class="logo"> <img src="img/logo.png" alt="logo" /> </div> <i class="fa fa-align-justify menu-toggle"></i> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <!--<li><a href="#">Login</a></li> --> <li> <a href="#"> <i class="fa fa-user"></i> Nathan Ashbury <i class="fa fa-chevron-down"></i> </a> <ul> <li><a href="#">Dashboard</a></li> <li><a href="#" class="logout">Logout</a></li> </ul> </li> </ul> </header>

Answer 1

Your nav is a class, use $('.nav') . You have not written CSS for the class name .showing for .nav or .nav ul . So, nothing will happen even if you click.

Answer 2

Modify the jquery.menu-toggle to toggle onclick() function

  $(document).ready(function () {
      $(".menu-toggle").on("click", function () {
            $('.nav').toggleClass('showing');
            $('.nav ul').toggleClass('showing');
      });
  });