Материализовать CSS - наложение Sidenav на всю страницу

Я использую Materialise CSS, и я хочу, чтобы навигационная панель для sidenav на среднем и маленьком экранах. Я сделал это так же, как в документации. Проблема в том, что когда я нажимаю кнопку меню, открывается 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-наложению, но я не хочу, чтобы установить его вручную. Я ищу другое решение.

Ответы

Ответ 1

У меня такая же проблема. Поскольку <ul class="side-nav"> содержится внутри <div class="navbar-fixed"> и наложение имеет тот же z-индекс, вы всегда будете иметь эту проблему при использовании navbar-fixed.

Вы можете возиться с z-индексами различных элементов, но каждый из них приводит к менее идеальным отображениям при активации боковой навигации.

Чтобы обойти это, я поместил в структуру документа <ul class="side-nav"> в структуру документа <div class="navbar-fixed"> и проблема была решена сама. Как это:

<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 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>
      </div>
    </div>
  </nav>
</div>

Ответ 2

Измените файл материализуемого CSS, чтобы изменить #sidenav-overlay на

#sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 996;
    will-change: opacity;
}

Ответ 3

Измените CSS файл материализации, изменив z-index в #sidenav-overlay на 990. Это решило проблему для меня.

Ответ 4

У меня была та же проблема, и исправить это гораздо проще, чем возиться с любым z-index. Просто убедитесь, что ваш фактический

<ul class="side-nav" id="mobile-sidenav">

содержимое находится за пределами тегов <header></header>. Если он внутри тегов заголовка, вы увидите то же поведение, которое вы разместили здесь.

На мой взгляд, это вина отличной от других материализации документации. Они ясно дают понять, что sidenav HTML не должен содержаться в тегах <nav></nav>, но не указывают, что он не будет работать внутри тегов заголовка.

В сумме ваш триггер должен быть в тегах <nav></nav>, а фактический контент sidenav определен после окончания </header>. Это лучше, чем возиться с z-index, так как это может сломать другие вопросы и стать головной болью при обслуживании.

enter image description here