Mobile menu doesn't show in Material Design

Question

I'm using MaterializeCss and I have a default menu as well as mobile menu, following the example from their website . When the screens becomes smaller, the top menu row should disappear and the site needs to only show the bars for mobile version menu.

It doesn't work. When I click I see no behavior but also no messages. The linkage between the component and the size is set. Feeling very confused how to troubleshoot.

Have a look at this non-working fiddle .

<a href="#" data-activates="mobile-demo" class="right button-collapse">
  <i class="material-icons">menu</i>
</a>
<ul id="nav-mobile" class="application left hide-on-med-and-down">
  <li><a id="home-menu" href="#">START</a></li>
  <li><a id="uno-menu" href="#">BEEP</a></li>
  <li><a id="duo-menu" href="#">BLOPP</a></li>
  <li><a id="tres-menu" href="#">POPP</a></li>
</ul>
<ul id="mobile-demo" class="application side-nav">
  <li><a id="home-mob-menu" href="#vinn">START mob</a></li>
  <li><a id="uno-mob-menu" href="#vinn">BEEP mob</a></li>
  <li><a id="duo-mob-menu" href="#krita">BLOPP mob</a></li>
  <li><a id="donkey-mob-menu" href="#demos">SNOPP mob</a></li>
  <li><a id="monkey-mob-menu" href="#misc">ROPP mob</a></li>
</ul>

Answer 1

Have you tried the examples described in the mobile section of the docs:

http://materializecss.com/side-nav.html#options

Here's my attempt:

<nav>
  <div class="nav-wrapper blue-grey darken-3">
    <a href="#" class="brand-logo">SPA</a>
    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#">Home</a></li>
      <li><a href="#main/interesting-section">Interesting</a></li>
      <li><a href="#details">Details</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <ul class="side-nav" id="mobile-demo">
      <li><a href="#">Home</a></li>
      <li><a href="#main/interesting-section">Interesting</a></li>
      <li><a href="#details">Details</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>

and it needs the following javascript to initialise:

$(function() {
  $(".button-collapse").sideNav();
})

CodePen

Answer 2

You need to initialise the side nav

$( document ).ready(function(){
    $(".button-collapse").sideNav();
});

http://materializecss.com/navbar.html#navbar-tabs

To get the hamburger icon effect, you need this

<i class="material-icons">menu</i>