Не могу изменить цвет фона класса "меню" - PullRequest
Новая
       22

Не могу изменить цвет фона класса "меню"

0 голосов
/ 28 апреля 2018

Я хочу изменить цвет класса "menu", но я не знаю, почему, когда я вызываю класс "menu" на css, как показано ниже, он не меняется. Можете ли вы предложить мне лучший сброс CSS или другое решение? 

.menu{
 background-color: black;}


<div class="menu">
<div class="container">
  <nav class="navbar navbar-expand offset-3 fixed-top">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-menu">
       <span class="navbar-toggler-icon"></span>
     </button>
    <div class="collapse navbar-collapse" id ="collapse-menu">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="#gioithieu">ABOUT</a> 
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#portfolio">PORTFOLIO</a> 
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">CONTACT</a> 
        </li>
      </ul>
    </div>
  </nav>
</div>

Ответы [ 3 ]

0 голосов
/ 28 апреля 2018

Попробуйте это: 

<style>
.menu{
 background-color: black !important;
}
</style>
0 голосов
/ 28 апреля 2018

Ваш фон не отображается, поскольку .menu сворачивается и имеет нулевую высоту и ширину. Это происходит потому, что дочерний элемент имеет position: fixed и выпадает из родительского потока. Вы также можете использовать классы Bootstrap 4 для определения background-color . 

<div class="menu fixed-top">
    <div class="container">
      <nav class="navbar navbar-expand offset-3">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-menu">
           <span class="navbar-toggler-icon"></span>
         </button>
        <div class="collapse navbar-collapse" id="collapse-menu">
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="#gioithieu">ABOUT</a> 
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#portfolio">PORTFOLIO</a> 
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">CONTACT</a> 
            </li>
          </ul>
        </div>
      </nav>
    </div>
</div>

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

0 голосов
/ 28 апреля 2018

попробуйте использовать! Важный, как это 

<style>
    .menu
    {
     background-color: black!important;
    }
</style>
...