2 bootstrap navbars один фиксированный сверху и один снизу не принимает разные цвета

Question

У меня есть загрузочный navbar статический сверху и один статический снизу Я хочу, чтобы цвет фона нижнего был радиальным градиентом (что я сделал и цвет, который я настрою), но затем изменится фоновый цвет верхней панели навигации, и я попытался использовать «#» для выбора элемента, но это тоже не сработало. Вот HTML:

.navbar-header .navbar-brand:hover, .navbar-default .navbar-brand:focus { 
 
    color:lightblue; 
 
    list-style-type:none; 
 
} 
 
.navbar-custom /*bottom navbar music player.*/ { 
 
    background: linear-gradient(180deg, red, blue); 
 
    color:#ffffff; 
 
    border-radius:0; 
 
}

<div class="container-fluid"> 
 
     
 
<div class="navbar navbar-custom navbar-fixed-top" id="main-navbar" > 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <a href="" class="navbar-brand">FaceTheMusic</a> 
 

 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="sr-only">Toggle navigation</span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse navHeaderCollapse" aria-expanded="false"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="">Home</a> </li> 
 
       <li><a href="">Login</a></li> 
 
       <li><a href="">Search</a></li> 
 
       <li><a href="">Upload</a></li> 
 
      </ul> 
 
     <form action="" class="navbar-form navbar-right" role="search"> 
 
\t <div class="form-group"> 
 
\t <input type="text" class="form-control" placeholder="Search here" /> 
 
\t </div> 
 
      <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button> 
 
\t </form> 
 
     </div> 
 
    </div> 
 
</div> 
 
     </div> 
 

 

 
<div id="navPlayer" class="navbar navbar-custom navbar-fixed-bottom"> 
 
    
 
<button type="button" class="btn btn-primary btn-lg"> 
 
    <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 
 
    
 
</button> 
 

 
</div>

Я думаю, что только CSS на вершине имеет значение, но вставили весь styleseheet на всякий случай.

С наилучшими пожеланиями,

Answer 1

Поскольку вы используете .navbar-custom, который применяется к обоим NavBars.

.navbar-fixed-top{ 
    /*css for top nav*/ 
} 
.navbar-fixed-bottom{ 
    /*css for bottom nav*/ 
}