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>