MaterializeCSS Navbar button not triggering side nav - css

Question

I have the following code for a side-nav:
<ul id="slide-out" class="side-nav">
<li><a class="subheader">Last Updated:</a></li>
<li><a>Text Here</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
I also have the following header code:
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="button-collapse" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
So why is the menu item not coming up in my nav bar and why is it not triggering the side nav?
Also, if i remove the button-collapse class, I am able to see the menu but clicking on it does not trigger side-nav
Here is my jsFiddle
Edit: My problem is not the icon, it's the fact that clicking on the menu icon/text does not activate the side navigation menu.
How do I make the side-nav work on mobile AND DESKTOP

Answer 1

Class button-collapse was setting display:none in CSS due to following for desktop:
#media only screen and (min-width: 993px)
nav a.button-collapse {
display: none;
}
Not sure the reason of it.
However you can use other class than button-collapse and it will work.
HTML:
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="my-btn" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
JS:
(function($){
$(function(){
$('.my-btn').sideNav({
edge: 'left', // Choose the horizontal origin
closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
draggable: true // Choose whether you can drag to open on touch screens
}
);
}); // end of document ready
})(jQuery); // end of jQuery name space
Fiddle: https://jsfiddle.net/6hfrw33n/

Answer 2

If you want the menu to be accessible on all screensizes you just have
to add a simple helper class show-on-large to the .sidenav-trigger.
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue darken-1">
<a class="brand-logo center" href="#">Website Name</a>
<ul class="right">
<li><a data-activates="slide-out" class="button-collapse show-on-large" href="#"><i class="material-icons">menu</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
as shown here: https://materializecss.com/sidenav.html

Answer 3

Add this line in you js file $('.button-collapse').sideNav();