title: Materialize CSS SideNav
body: <p>Okay i'm trying to use the mobile side navigation that materialize has built in and i'm able to get the menu icon to appear but then when i click it nothing happens, it's as if the function is not being called but there are not any errors in the console</p>
  
  <pre><code>&lt;div class="navbar-fixed"&gt;
      &lt;nav class="white"&gt;
          &lt;div class="nav-wrapper"&gt;
          &lt;a href="index.html" class="brand-logo"&gt;&lt;img src="img/logo.png" alt="Logo" height="64"&gt;&lt;/a&gt;
          &lt;a href="#" data-activates="mobile-demo" class="button-collapse"&gt;&lt;i class="material-icons black-text"&gt;menu&lt;/i&gt;&lt;/a&gt;
          &lt;ul class="right hide-on-med-and-down"&gt;
              &lt;li&gt;&lt;a id="nav" href="index.html" class="red-text1"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="webdesign.html" class="red-text1"&gt;Web Design&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="graphicdesign.html" class="red-text1"&gt;Graphic Design&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="video.html" class="red-text1"&gt;Video&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about.html" class="red-text1"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="awards.html" class="red-text1"&gt;Awards&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html" class="red-text1"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="side-nav" id="mobile-demo"&gt;
              &lt;li&gt;&lt;a href="index.html" class="red-text1"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="webdesign.html" class="red-text1"&gt;Web Design&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="graphicdesign.html" class="red-text1"&gt;Graphic Design&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="video.html" class="red-text1"&gt;Video&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about.html" class="red-text1"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="awards.html" class="red-text1"&gt;Awards&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html" class="red-text1"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    &lt;link rel="stylesheet" href="css/master.css"&gt;
  &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;!-- Compiled and minified CSS --&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"&gt;
    &lt;!-- Compiled and minified JavaScript --&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Scripts--&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://materializecss.com/templates/starter-template/js/init.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I'm also using angular to build the page if that makes any difference</p>