Bootstrap 4 - тумблер открывается за всем контентом - PullRequest
Новая
       20

Bootstrap 4 - тумблер открывается за всем контентом

0 голосов
/ 13 января 2020

Мое меню переключения в Bootstrap 4 работает нормально, но меню открывается за всем остальным содержимым на моей странице. Я попытался дать навигационной панели z-index 9999, но это не сработало.

Не могу понять, почему? Кто-нибудь может помочь? Спасибо.

HTML

<nav class="navbar navbar-expand-lg sticky-top navbar-dark" id="navbar-solid" role="navigation">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse dropdown" id="navbarToggler">
    <ul class="navbar-nav nav-fill">
       <li class="nav-item active"><a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a></li>
       <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
       <li class="nav-item"><a class="nav-link" href="#">About us</a></li>
       <li class="nav-item"><a class="nav-link" href="#">Get in touch</a></li>
       <li class="nav-item"><a class="nav-link" href="#">Info</a></li>
       <li class="nav-item"><a class="nav-link" href="#">FAQ's</a></li>
       <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

<header class="row col-lg-12 p-0 m-0">
  <div class="row p-0 m-0 brand-nav-row align-items-center">
      <div class="col-lg-3 offset-lg-1 pb-lg-0 pb-lg-4 col-12 offset-0 mt-4 mb-4"  style="text-align:center;">
         <a href="index.html"><img src="img/atv-logo-rgb.png" id="brand-logo" /></a>
      </div>
  </div>

  <div class="row" style="height:74%">
      <div id="header-overlay-text" class="col-lg-5 offset-lg-6 p-lg-0 pb-lg-5 align-self-xl-center align-self-lg-end align-self-sm-end p-sm-5">
          <h2 style="font-weight: 700;">Morbi enim sem tempus vel dignissim and hendrerit</h2>
          <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit vitae risus</p>
          <a href="#" title="contact us" class="button btn btn-primary">Contact us</a>
      </div>
  </div>
</header>

CSS

.page header {
    background-color: #fff;
}
.home header {
    background: url('../img/title-image.png') no-repeat top left;
    height: 55rem;
    background-color: #ccc;
}
.navbar .nav-item a {
    font-size: 1.1em;
}

1 Ответ

0 голосов
/ 13 января 2020

.navbar-dark заставляет ваш <nav> s 'текст быть белым, поэтому он не виден на фоне цвета по умолчанию.

Либо удалите .navbar-dark, либо задайте ему фон: (.bg-info, .bg-dark, .bg-primary, et c ...).

См. работающий .

Если проблема не в этом (и она вызвана просто недостаточной детализацией вашего фрагмента), укажите в своем вопросе минимальный воспроизводимый пример ( который фактически показывает проблему, которую вы описываете).
Совет: используйте кнопку <> в редакторе, чтобы создать фрагмент. Также убедитесь, что вы добавили в него все необходимые зависимости .

...