I’m using materialize.css but the sidemenu seems unpredictable. It usually works fine in all major browsers in the localhost but on production clicking on the sidemenu doesn’t make it appear (ridersam.meteor.com). I’m at a loss to what I’m doing wrong in this. I would bank on some Karma for your help in this 
The code for my header.html and header.js is as follows:
HEADER.html
<template name="header">
{{#if currentUser}}
<div class="navbar-fixed">
<nav role="navigation" class="amber accent-3">
<div class="nav-wrapper container">
<a href="#" class="brand-logo center disable-link-cursor">{{navTitle}}</a>
<a href="#" class="nav-back-button {{backButtonActive}}">
<i class="mdi-navigation-chevron-left" style="font-size: 3em;"></i>
</a>
<a href="#" data-activates="slide-out" class="button-collapse show-on-large {{buttonCollapseActive}}">
<i class="mdi-navigation-menu"></i>
</a>
{{#if onActivityList}}
<a href="{{ pathFor 'activitySubmit' }}" class="right"><i class="mdi-content-add" style="font-size: 3em;"></i></a>
{{/if}}
<ul id="slide-out" class="side-nav amber accent-3">
<center><i class="ion-android-person custom-lg"></i></center>
<li class="{{ activeRouteClass 'rideList' }}"><span><i class="ion-android-bus liner"></i></span><a href="{{ pathFor 'ridesList' }}"><b>RIDES</b></a></li>
<li class="{{ activeRouteClass 'activityList' }}"><span><i class="ion-android-time liner"></i></span><a href="{{ pathFor 'activityList' }}"> <b>SCHEDULED</b></a></li>
<li class="{{ activeRouteClass 'mapCanvas' }}"><span><i class="ion-pull-request liner"></i></span><a href="{{ pathFor 'mapCanvas' }}"> <b>REQUEST RIDE</b></a></li>
<li><span><i class="ion-log-out liner"></i></span><a id="logout-button" href="#" ><b>LOG OUT</b></a></li>
</ul>
</div>
</nav>
</div>
{{/if}}
</template>
HEADER.Js
Template.header.onRendered(function () {
$(".button-collapse").sideNav({
menuWidth: 300, // Default: 240
edge: "left",
closeOnClick: true
});
});
Template.header.helpers({
navTitle: function () {
switch (Router.current().route.getName()) {
case "activityList": return "Your Scheduled";
case "login": return "Log In";
case "register": return "Register";
case "activitySubmit": return "Schedule Route";
case "activityPage": return this.title;
default: return "RideGlobus";
}
},
onActivityList: function () {
return Router.current().route.getName() === "activityList";
},
buttonCollapseActive: function () {
return isBackPage() ? "hide-display" : "show-display";
},
backButtonActive: function () {
return isBackPage() ? "show-display" : "hide-display";
},
activeRouteClass: function () {
var args = Array.prototype.slice.call(arguments, 0);
args.pop();
var active = _.any(args, function (name) {
return Router.current() && Router.current().route.getName() === name;
});
return active && "active";
}
});
Template.header.events({
"click #logout-button": function (e) {
e.preventDefault();
Meteor.logout(function (error) {
if (error) {
alert("We could not log you out at the moment. Please try again later.");
} else {
Router.go("login");
}
});
},
"click .nav-back-button": function (e) {
e.preventDefault();
window.history.back();
}
});
isBackPage = function () {
switch (Router.current().route.getName()) {
case "activitySubmit": return true;
case "activityPage": return true;
case "ridePage": return true;
case "mapCanvas": return true;
default: return false;
}
}