title: off-canvas navigation menu isn't functioning
body: <p>I don't what is going on, but if anyone can help me that could be great. So I'm trying to create a navigation menu that is off-canvas for mobile layouts, but I've been running into issues; and I'm at a dead end right now. If someone can take a look at my code and point me in the right direction that would be great.</p>
  
  <p>The html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="../scripts/javascript/mobilnavprotoscript.js"&gt;&lt;/script&gt;
      &lt;script src="../scripts/javascript/modernizr.custom.64630.js"&gt;&lt;/script&gt;
      &lt;link href="../css/mobilnavstyles.css" rel="stylesheet" type="text/css" media="screen"/&gt;
      &lt;title&gt;Welcome to My Domain&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;nav id="toggle" class="main"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Video&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Pictures&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Audio&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Other Work&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/nav&gt;       
          &lt;div id="wrapper"&gt;
          &lt;div class="mobilmenu"&gt;&lt;a href="#toggle" class="nav-link"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;       
          &lt;header&gt;
              &lt;h1&gt;This is a placeholder &lt;br /&gt;
                  for header&lt;/h1&gt;
          &lt;/header&gt;
                 &lt;div id="content"&gt;
                  &lt;article class="content-main"&gt;
                      &lt;section&gt;
                          &lt;h2&gt;Heading goes here...&lt;/h2&gt;
                          &lt;time datetime="2014-05-21T02:43:00"&gt;Officialy Posted On May 21&lt;sup&gt;st&lt;/sup&gt; 2:35 A.M.&lt;/time&gt;
                          &lt;p&gt;Content will go here...&lt;/p&gt;
                      &lt;/section&gt;
                  &lt;/article&gt;
                  &lt;aside&gt;
                      &lt;p&gt;More content soon...&lt;/p&gt;
                  &lt;/aside&gt;
                  &lt;/div&gt;
          &lt;footer&gt;
                  &lt;div class="copyright"&gt;
                      &lt;span&gt;All rights reserved 2014.&lt;/span&gt;
                  &lt;/div&gt;
              &lt;nav class="foot"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Video&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Pictures&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Audio&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Other Work&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/footer&gt;
          &lt;/div&gt;               
      &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Here's the css that's neccesary for what I'm trying to do (Please do let me know if there's any other parts of my css you need to see.):</p>
  
  <pre><code>nav#toggle
  {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15.750em;
  left: -15.750em;
  transform: translate(0px, 0px);
  transition: 0.15s ease;
  height: 100%;
  }
  
  nav#toggle.active 
  {
  transform: translate(15.750em, 0px);
  }
  
  nav.main
  {
  margin: 0;
  padding: 0;
  font-family: 'bebas_neueregular',sans-serif;
  box-shadow: 0px 2px 3px #393333;
  background-color: #950707;
  }    
  
  nav.main ul
  {
  display: flex;
  flex-direction: column;
  text-align: right;
  font-size: 1.45em;
  list-style: none;
  margin: 0;
  padding: 0;
  }
  
  nav.main ul li
  {
  border-bottom: 1px solid  #af1b1b;
  }
  
  nav.main ul li:first-child
  {
  border-top: 1px solid  #af1b1b;
  }
  
  nav.main ul li a
  {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.35em;
  }
  
  nav.main ul li a:hover
  {
  background-color: #ffffff;
  }
  
  div.mobilmenu
  {
  background-color: #950707;
  }
  
  div.mobilmenu a
  {
  text-decoration: none;
  color: inherit;
  }
  
  div.mobilmenu a i
  {
  font-size: 1.75em;
  padding: 0.32em;
  }
  
  div.mobilmenu a i:hover
  {
  background-color: #ffffff;
  transition: 325ms ease;
  }
  
  #wrapper
  {
  display: flex;
  flex-direction: column;
  transform: translate(0px, 0px);
  transition: 0.15s ease;
  }
  
  #wrapper.active
  {
  transform: translate(15.750em, 0px);
  }
  </code></pre>
  
  <p>Here's the jQuery script I'm using:</p>
  
  <pre><code>$(document).ready(function () {
   $('a.nav-link').click(function () {
     $('nav#toggle').toggleClass('active');
     $('#wrapper').toggleClass('active');
   });
  });
  </code></pre>