Материализация CSS sidenav не активируется на мобильных устройствах, но работает в настольном браузере

Question

Материализация CSS Sidenav работает в настольном браузере: боковая панель отображается при нажатии. Но когда я тестировал его в мобильном браузере, отображается значок меню, но при нажатии он не открывает боковую панель. Источник html / css указан ниже:

<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>

и исходный код js

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

Спасибо

введите описание изображения здесь

Answer 1

Попробуйте скопировать код из документации и изменить в соответствии с вашими потребностями.

Answer 2

попробуйте zIndex = 1 для класса sidenav и nav