title: MaterializeCSS - Mobile Collapse menu not showing when clicked
body: <p>I'm beginning a web app using Materialize CSS v0.97, jQuery Mobile v1.4.5, and jQuery v2.1.4. </p>
  
  <p>I'm trying to use <a href="http://materializecss.com/navbar.html#mobile-collapse" rel="nofollow noreferrer" title="Mobile Collapse Example">the mobile collapse tutorial</a> to have a navbar in the jQuery Mobile header, which on mobile devices changes to a hamburger button with the menu appearing when clicked. </p>
  
  <p>When I resize my browser (Chrome, latest on Mac v10.11) to mobile size, the hamburger appears but clicking or hovering or anything does not make the menu appear.</p>
  
  <p>The only thing I have changed was commenting out a line in jQuery Mobile JS because of <a href="https://stackoverflow.com/a/32393393/4892895" title="SO question about apps not displaying in Chrome because of jQuery Mobile">this post about how to fix the Chrome security warning</a>.<br>
  Could that be why the nav bar isn't working? My site doesn't load at all with the below code because of that warning, so I have everything js and css saved locally with relative links to them. But this snippet worked in the snippet preview...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( document ).ready(function(){
      $(".button-collapse").sideNav();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.css" rel="stylesheet"/&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet"/&gt;
  
  &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
  
  
  &lt;body&gt;
  &lt;div data-role="page" id="home"&gt;
      &lt;div data-role="header"&gt;
          &lt;nav&gt;
              &lt;div class="nav-wrapper"&gt;
                  &lt;a href="#!" class="brand-logo"&gt;Logo&lt;/a&gt;
                  &lt;a href="#" data-activates="mobile-demo" class="button-collapse"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/a&gt;
                  &lt;ul class="right hide-on-med-and-down"&gt;
                      &lt;li&gt;&lt;a href="sass.html"&gt;Sass&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="badges.html"&gt;Components&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="collapsible.html"&gt;Javascript&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="mobile.html"&gt;Mobile&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="side-nav" id="mobile-demo"&gt;
                      &lt;li&gt;&lt;a href="sass.html"&gt;Sass&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="badges.html"&gt;Components&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="collapsible.html"&gt;Javascript&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="mobile.html"&gt;Mobile&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;!-- /header --&gt;
  
      &lt;div role="main" class="ui-content"&gt;
          &lt;table class="centered"&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th data-field="collection"&gt;Collection&lt;/th&gt;
                  &lt;th data-field="description"&gt;&lt;/th&gt;
                  &lt;th data-field="progress"&gt;&lt;/th&gt;
                  &lt;th data-field="link"&gt;&lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;Stuff 1&lt;/td&gt;
                  &lt;td&gt;Description of things in Stuff 1. Stuff 1 is really great, ya know? So much stuff in it.&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;i class="material-icons"&gt;chevron_right&lt;/i&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Stuff 2&lt;/td&gt;
                  &lt;td&gt;Description of things in Stuff 2. Stuff 2 is really great, ya know? So much stuff in it.&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;i class="material-icons"&gt;chevron_right&lt;/i&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Stuff 3&lt;/td&gt;
                  &lt;td&gt;Description of things in Stuff 3. Stuff 3 is really great, ya know? So much stuff in it.&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;i class="material-icons"&gt;chevron_right&lt;/i&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;!-- /content --&gt;
  &lt;/div&gt;
    &lt;!-- /page --&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>