Панель навигации bootstrap 4 не реагирует и остается открытой при стилизации

У меня проблема с моей навигационной панелью ... После того, как я стилизовал ее с помощью CSS, она не очень отзывчива и остается открытой на небольших экранах ... Вот мой код.

HTML:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="big-bar">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
            <div class="collapse navbar-collapse" id="navbar-el">
              <div class="navbar-nav">
                <a class="nav-item nav-link active flip" href="home.html">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link flip" href="mansion.html">Mansion</a>
                <a class="nav-item nav-link flip" href="#third-div">Sacrificial Grounds</a>
                <a class="nav-item nav-link flip" href="#fourth-div">Children of the Forest</a>
                <a class="nav-item nav-link flip" href="#fifth-div">About</a>
              </div>
            </div>
          </nav>

CSS:

body{
  background-color: black;
}

.navbar {
  background: rgba(0, 0, 0, 0) !important;
  margin-top: 50px;
}

#navbar-el {
  display: flex;
  align-items: center;
  justify-content: center;
}

#navbar-el a {
  margin: 0 50px 0 50px;
  font-size: 20px;
  color: white;

}

#navbar-el a:link {
}

#navbar-el a:visited {
}

#navbar-el a:hover {
    color: #ED8105;
}

#navbar-el a:active {
  color: #ED8105 !important;
}

#navbar-el a:focus{
  outline: none;
}

Кодовое отверстие: https://codepen.io/Sarithan/pen/jvKaGa

Один совет: пожалуйста, отформатируйте свой код при публикации. Так людям будет легче читать.

Pytth 13.09.2018 23:45
0
1
551
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Он остается открытым, потому что у вас есть display:flex в дополнительном CSS ...

#navbar-el {
  display:flex
  align-items: center;
  justify-content: center;
}

Удалите `display: flex '. Также убедитесь, что у вас есть правильная цель для переключателя.

https://www.codeply.com/go/5NWAu5Zz1X

А что насчет того, что он не сжимается вместе со страницей? Я знаю, что это из-за маржи .. но я не мог исправить это даже с помощью медиа-запросов ..

Peter Brezitski 13.09.2018 19:35

используйте navbar-expand-lg

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="big-bar">

Стандартная панель навигации создается с помощью класса .navbar, за которым следует адаптивный класс сворачивания: .navbar-expand-xl | lg | md | sm (размещает панель навигации вертикально на очень большом, большом, среднем или маленьком экранах).

https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

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

Вы должны удалить поле из ваших якорных тегов (установите его на margin: 0 auto; и используйте justify-content: space-between; на вашем navbar-nav. Я также добавил flex-grow: 1; в navbar-nav.

Я добавил этот CSS:

.navbar-nav{
  justify-content: space-between;
  flex-grow: 1;
}

Пожалуйста, проверьте код.

https://codepen.io/anon/pen/rZKEvq

Плохо то, что сама кнопка не работает: D

Peter Brezitski 15.09.2018 16:21

Извините за поздний ответ. Измените ID вашей navbar-collapse на правильный ID: <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> См. Перо для рабочей версии. Идентификатор вашего .navbar-collapse должен совпадать со значением data-target.

Vanch 17.09.2018 08:07

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