<div class="navbar-fixed"><!--the bar at the top of the screen "fixed" means it follows down the screen-->
            <nav class="orange darken-2"><!--the color of the nav bar-->
                <div class="nav-wrapper container">
                    <a href="index.html" class="brand-logo">FreePBX Support</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"><!--you can always add another item to the bar--><!--class="right hide-on-med-and-down"-->
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                    <ul class="side-nav" id="mobile-demo"><!--you can always add another item to the bar-->
                        <li><a href="index.html">Home</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </nav>
            </div>


I put the script inline

<script>
$( document ).ready(function(){
  $(".button-collapse").sideNav();
})
</script>