title: Responsive Navigation Menu : Toggle not working
body: <p>I am working on a simple navigation menu. I want to make this responsive. When i re-size the window less than 480 px then the media query works but the menu trigger is not toggling. On mobile view i just want to show the Navigation Menu but not the options. When someone clicks on it then it should toggle.
  My code is here in the CodePen: <a href="http://codepen.io/parakhharsh/pen/NqRxdE" rel="nofollow">http://codepen.io/parakhharsh/pen/NqRxdE</a>?</p>
  
  <p>Html Code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;OpenMoz&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta charset=utf-8&gt;&lt;meta http-equiv=X-UA-Compatible content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" type="text/css" href=""/&gt;
    &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"&gt;
  
    &lt;!-- Latest compiled and minified JavaScript --&gt;
    &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;   
    &lt;/head&gt;
    &lt;body&gt;    
    &lt;span class="menu-trigger"&gt;Menu&lt;/span&gt;    
      &lt;nav class="navbar navbar-default"&gt; 
      &lt;!--    &lt;div class="nav-menu"&gt;  --&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li style="margin-left:15px;"&gt;&lt;a href="home.php" class="ui-btn-active" data-icon="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:15px;"&gt;&lt;a href="about.php" data-icon="home"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:15px;"&gt;&lt;a href="contact.php" data-icon="home"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;!--  &lt;/div&gt;  --&gt;
      &lt;/nav&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS code: </p>
  
  <pre><code>.menu-trigger
   {
      display: none;
   }
  
   @media screen and (max-width: 480px)
   {
      .menu-trigger
      {
        display: block;
        color: #305782;
        background-color: #d5dce4;
        padding:10px;
        text-align: left;
        font-size: 83%;
        cursor: pointer;
      }
      nav.nav-expanded
      {
        display: block;
      }
      nav.navbar navbar-default
      {
        display: none;
      }
      nav.navbar navbar-default ul li
      {
        float: none;
        border-bottom: 2px solid #d5dce4;
      } 
      nav.navbar navbar-default ul li:last-child
      {
        border-bottom:none;
      }
   }
  </code></pre>
  
  <p>Javascript Code:</p>
  
  <pre><code>jQuery(document).ready(function() {
        jQuery(".menu-trigger").click(function() {
          jQuery(".navbar navbar-default").slideToggle();
        });
  });
  </code></pre>
  
  <p>Thank you so much for you help.</p>