Materialize CSS side-nav not working

Question

I have a basic setup of Materialize running and everything seems to be fine, except for the slide out side-nav.

Here's my code. Menu:

<ul class="right hide-on-med-and-down">
    <li><a class="dropdown-button" data-constrainwidth="false" data-beloworigin="true" data-activates="about-drop" href="#!">About<i class="material-icons left">arrow_drop_down</i></a></li>
    <li><a class="modal-trigger" href="#signup">Signup</a></li>
    <li><a class="modal-trigger" href="#sign-in">Sign In</a></li>
</ul>

<ul id="slide-out" class="side-nav">
    <li><a href="#">About</a></li>
    <li><a href="#">Signup</a></li>
    <li><a href="#">Sign In</a></li>
</ul>

<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

JS:

<script>
$(".dropdown-button").dropdown();
$(".button-collapse").sideNav();
$(document).ready(function(){
    $('.modal-trigger').leanModal();
});
</script>

I get the appropriate hamburger menu when reducing the screen size, however, clicking the hamburger does not expand out a menu. The URL updates with a hash # and that's it. There are no errors reported in my JS output.

With the other JS functions, the dropdown menu works and the modal works. Stumped as to why Mr. sideNav is not cooperating.

Any ideas?

Answer 1

I found a solution. I grabbed the init hack from Materialize: http://materializecss.com/templates/starter-template/js/init.js and then made sure it was last called in my JS. (Putting it before the rest of the JS causes it to fail.)