Можно ли изменить цвет расширенной навигационной панели в Bootstrap 4?

Question

Я работаю над сайтом Bootstrap и спрашиваю себя, возможно ли добавить цвет фона в расширенную панель навигации на маленьких экранах. Изображения ниже могут дать вам пример того, что я хочу:

Большие экраны

Меньшие экраны

Поэтому, когда вы нажимаете на гамбургер и появляется меню, мне бы хотелось, чтобы у него был цвет фона. А на больших экранах должен быть цвет фона.

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

Редактировать: это мой код navbar:

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <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="navbarNavAltMarkup">
    <div class="navbar-nav w-75 m-auto justify-content-around">
      <a class="nav-item nav-link active" href="#">Over ons <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Assortiment</a>
      <a class="nav-item nav-link" href="#">Specialiteiten</a>
      <a class="nav-item nav-link" href="#">Contact</a>
    </div>
  </div>
</nav>

Answer 1

добавить media queries для достижения этого

@media (min-width: 434px) {
  .navbar-collapse{
  background-color: red;
  }  
}
@media (min-width: 768px) {
  .navbar-collapse{
  background-color: unset;
  }  
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light">
  <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="navbarNavAltMarkup">
    <div class="navbar-nav w-75 m-auto justify-content-around">
      <a class="nav-item nav-link active" href="#">Over ons <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Assortiment</a>
      <a class="nav-item nav-link" href="#">Specialiteiten</a>
      <a class="nav-item nav-link" href="#">Contact</a>
    </div>
  </div>
</nav>

Answer 2

Да, вы можете изменить цвет фона панели навигации без каких-либо проблем. Но вы хотите изменить цвет фона при щелчке, для этого вам нужно добавить простой скрипт для переключения класса на панели навигации, с помощью которого вы можете изменить цвет фона

$(document).ready(function(){
$('.navbar-dark > button').on('click', function(){
    $('.navbar-dark').toggleClass('color-changed');
});
});

.navbar-dark.color-changed{
background-color:grey!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>    
        </ul>
      </div>  
    </nav>

https://codepen.io/Vikaspatel/pen/QoaKOj

Answer 3

Используйте медиазапрос, соответствующий точке останова navbar-expand-md ...

@media(max-width: 768px) {
    .navbar.bg-light {
        background-color: red !important;
    }
}

https://www.codeply.com/go/Fzyc7GE495

Это изменит цвет всего Navbar, а не только свернутогочасть.Обратите внимание, что вам нужно будет использовать !important, поскольку вы используете bg-light.Navbar по умолчанию не имеет цвета, поэтому вам не нужно использовать bg-light, если вам не нужен Navbar для цвета на экранах большей ширины.