Я использую Materialise CSS, и я хочу, чтобы навигационная панель для sidenav на среднем и маленьком экранах. Я сделал это так же, как в документации. Проблема в том, что когда я нажимаю кнопку меню, открывается sidenav, но это похоже на изображение ниже
Я не могу щелкать ссылки в sidenav, так как оверлей sidenav покрывает всю страницу, даже сам sidenav. Он закрывается, когда я пытаюсь нажать на ссылку. Есть предложения как это решить?
HTML:
<div class="navbar-fixed">
<nav class="">
<div class="nav-wrapper red lighten-1">
<div class="container-fluid">
<a href="#!" class="brand-logo">
<img src="img/logo.png">
</a>
<a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">How It Works?</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">More</a></li>
<li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
</ul>
<ul class="side-nav" id="mobile-sidenav">
<li><a href="#">How It Works?</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">More</a></li>
<li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
</ul>
</div>
</div>
</nav>
</div>
Я понял, что у navbar-fixed есть z-index
997 (где sidenav-overlay также 997), и я думаю, что это может вызвать проблему. Однако у side-nav фиксированное позиционирование и z-index
999. Зависит ли он от своего родителя, даже если он имеет фиксированную позицию?
Edit: я могу решить эту проблему с изменением left
свойства sidenav-наложению, но я не хочу, чтобы установить его вручную. Я ищу другое решение.