title: Nav menu won't open or close on click
body: <p>I've been trying to make this hamburger Menu Work for the longest time now and I've tried a lot, but I just keep going in circles for some reason the menu won't open( Menu not opening is the PROBLEM :(  ),</p>
  
  <p>I got the menu from learning how to create it from this tutorial -> <a href="https://www.youtube.com/watch?v=FDh7Mdl2oww" rel="nofollow noreferrer">Youtube Link</a> </p>
  
  <p>Please let me know how I could fix this or refer me to similar post, Thanks! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".burger-nav").on("click", function() {
      $("header nav ul").toggleClass("open");
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header nav ul {
    height: 0;
    overflow: hidden;
    background: #6134A3;
  }
  
  header nav ul.open {
    height: auto;
  }
  
  .burger-nav {
    padding: 0px;
    margin: 0px;
    display: block;
    height: 40px;
    width: 100%;
    cursor: pointer;
    background-image: url(images/nav.png);
    background-repeat: no-repeat;
    background-size: 10%;
    background-position: 97%;
    background-color: #502196;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;head&gt;
    &lt;title&gt;MENU&lt;/title&gt;
    &lt;link rel="stylesheet" href="slicknav.css" /&gt;
    &lt;script language="JavaScript" type="text/javascript" scr="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;div class="wrapper"&gt;
        &lt;nav&gt;
          &lt;a class="burger-nav"&gt;&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;item 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;item 3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;item 4&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;!--watch this video to finish drop down https://www.youtube.com/watch?v=FDh7Mdl2oww --&gt;
  
  
    &lt;script language="JavaScript" type="text/javascript" scr="menu.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>