Меню подтолкнуло изображение вниз в мобильной версии с помощью начальной загрузки?

вот настольная версия панели навигации

enter image description here

вот изображение, когда размер экрана доходит до мобильной версии после нажатия на кнопку гамбургера

enter image description here

Я хочу, чтобы при нажатии на гамбургер открывалось меню, но если его не нажимать, оно будет открыто поверх изображения.

.navbar-light .navbar-toggler {
  outline: none !important;
  padding-top: 8px;
  padding-bottom: 2px;
  z-index: 1001;
}

.navbar-toggler .navbar-toggler-icon {
  background-color: black;
  color: black;
  height: 3px;
  display: block;
  margin-bottom: 6px;
}
<div class="container-fluid wow fadeIn">
  <nav class="navbar navbar-expand-md navbar-light bg-faded">
    <a class="navbar-brand wow fadeInLeft" href="#"><img src="img/logo.png" alt="logo" width="160px" height="60px"></a>
    <button aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
        <span class="navbar-toggler-icon"></span>
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto wow fadeInRight">
        <li class="nav-item active">
          <a class="nav-link" href="#"><strong>HOME </strong><span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><strong>ABOUT</strong></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><strong>SERVICES</strong></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><strong>PORTFOLIO</strong></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><strong>CONTACT US</strong></a>
        </li>
      </ul>
    </div>
  </nav>
</div>
<header id="home-section" class="mb-3">
  <img src="img/banner.jpg" alt="" width="100%">
</header>

Где я ошибся? Какое свойство css или класс начальной загрузки необходимо добавить?

Пожалуйста, укажите все CSS в логотипе и меню навигации.

Ramesh 10.09.2018 08:33
0
2
187
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете использовать класс .navbar-fixed-top, чтобы исправить это на мобильном телефоне.

спасибо, что подарили мне эту идею, я полностью забыл этот класс

Narayan Maity 10.09.2018 09:29

В мобильной версии сохраните раскрывающееся меню гамбургера position: absolute;, чтобы раскрывающееся меню отображалось над изображением.

Используйте медиа-запросы для мобильной версии и выполните код. Например,

@media only screen and (max-width: 600px) {
    .navbar-collapse{
        position: absolute;
    }
}

это не работает, пункты меню отображаются над значком, и все элементы прозрачны

Narayan Maity 10.09.2018 09:24

Другие вопросы по теме