Materialize CSS sidenav is not clickable on mobile but works on desktop browser

Question

Materialize CSS Sidenav works on desktop browser: the sidebar shows up when clicked. But when I tested it on the mobile browser, the menu icon shows, but when clicked it does not open the side bar. The html/css source is given below:

<nav class="white">
  <div class="nav-wrapper" >
    <a href="/" class="brand-logo center">
        <img src="/images/brand.png" width="150"/>
    </a>
    <a data-target="slide-out" class="sidenav-trigger">
        <i class="large material-icons cyan-text text-darken-4">menu</i>
    </a>
    <ul id="slide-out" class="sidenav">
            <li>
                <ul class="collapsible collapsible-accordion">
                    <li>
                        <a class="collapsible-header">Login<i class="material-icons right">arrow_drop_down</i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="/users/login">Employer</a></li>
                                <li><a href="/users/login">Job Seeker</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
    </ul>
 </div>

and the js init source is

 $('.sidenav').sidenav();

Thanks

enter image description here

Answer 1

Try to copy code from documentation and modify according to your needs.