Как изменить цвет фона при разрушении навигационной панели

Как вы меняете фоновый цвет свернутого навигатора, когда он идет вверх и вниз? Я изменил несколько частей из bootstrap.css:Как изменить цвет фона при разрушении навигационной панели

.navbar{ 
    background-color: #A9B7C0; 
    border-bottom-color: #EFD9C1; 
} 

.navbar-inverse { 
    background-color: #A9B7C0 !important; 
} 

.container .navHeaderCollapse .nav li a { 
    color: #EFD9C1; 
} 

.container .navHeaderCollapse .nav .dropdown .dropdown-menu li a { 
    color: black; 
} 

.navbar .navbar-brand{ 
    color: #EFD9C1; 
} 
.navbar .navbar-brand:hover{ 
    color: #EAC67A; 
} 

.collapse .nav .active a{ 
    color: #A9B7C0 !important; 
    background-color:#EFD9C1; 
} 

.collapse .nav .active a:hover{ 
    background-color:#EFD9C1; 
    color: #A9B7C0; 
} 

body { 
    background-color: #CCCBC6; 
    color:white; 
} 

@media screen and (max-width: 375px) { 
    .fullName{ 
    display:none; 
    } 
}

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

Вот мой HTML-код:

<div class="navbar navbar-inverse navbar-static-top"> 
    <div class ="container"> 
    <div class="navbar-header"> 
     <a href="http://www.facebook.com/rayvenhatesyou" class="navbar-brand"> <span class="glyphicon glyphicon-user"></span> <span class="fullName">Rayven Yor Zambo Esplanada</span></a> 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="(1)Home.html">Home</a></li> 
     <li><a href="(2)AboutMe.html">About Me</a></li> 
     <li class="dropdown"> 
      <a href="(3)MyFamily.html" class="dropdown-toggle" data-toggle = "dropdown">My Family <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#"> Mother </a></li>  
      <li><a href="#"> Father </a></li>  
      <li><a href="#"> Younger Brother </a></li>  
      <li><a href="#"> Older Brother </a></li>  
      </ul> 
     </li> 
     <li><a href="(4)Contact.html">Contact Me</a></li> 
     </ul> 
    </div> 
    </div> 
</div>

источник

2016-07-17 R Yor

Я не уверен, я понимаю проблему. Можете ли вы нарисовать его на экране? Я сделал [bin] (http://output.jsbin.com/weguya) для вас .. (Как только вы обновите свой вопрос, [nutify] (http://meta.stackexchange.com/a/43020/303669) me. –

@MoshFeu попытайтесь изменить размер браузера на небольшой размер, пока правая часть справа не станет значком с тремя горизонтальными полосами, так как вы нажмете на эту иконку, активная часть списка будет иметь черный фон с навигационной инверсией он обрушивается –

@MoshFeu [здесь, рис.] (http://imgur.com/sxV8303) –

Вы должны использовать же селектор в начальной загрузки, который делает: .navbar-inverse .navbar-nav>.active>a это как ваш стиль будет переопределить стиль бутстрапом в.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <style> 
 
     .navbar{ 
 
     background-color: #A9B7C0; 
 
     border-bottom-color: #EFD9C1; 
 
     } 
 

 
     .navbar-inverse { 
 
     background-color: #A9B7C0 !important; 
 
     } 
 

 
     .container .navHeaderCollapse .nav li a { 
 
     color: #EFD9C1; 
 
     } 
 

 
     .container .navHeaderCollapse .nav .dropdown .dropdown-menu li a { 
 
     color: black; 
 
     } 
 

 
     .navbar .navbar-brand{ 
 
     color: #EFD9C1; 
 
     } 
 
     .navbar .navbar-brand:hover{ 
 
     color: #EAC67A; 
 
     } 
 

 
     .collapse .nav .active a{ 
 
     color: #A9B7C0 !important; 
 
     background-color:#EFD9C1; 
 
     } 
 

 
     .collapse .nav .active a:hover{ 
 
     background-color:#EFD9C1; 
 
     color: #A9B7C0; 
 
     } 
 

 
     body { 
 
     background-color: #CCCBC6; 
 
     color:white; 
 
     } 
 

 
     .navbar-inverse .navbar-nav>.active>a { 
 
     background:#EFD9C1; 
 
     color: #A9B7C0 !important; 
 
     } 
 

 
     @media screen and (max-width: 375px) { 
 
     .fullName{ 
 
      display:none; 
 
     } 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="navbar navbar-inverse navbar-static-top"> 
 
     <div class ="container"> 
 
     <div class="navbar-header"> 
 
      <a href="http://www.facebook.com/rayvenhatesyou" class="navbar-brand"> <span class="glyphicon glyphicon-user"></span> <span class="fullName">Rayven Yor Zambo Esplanada</span></a> 
 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="(1)Home.html">Home</a></li> 
 
      <li><a href="(2)AboutMe.html">About Me</a></li> 
 
      <li class="dropdown"> 
 
       <a href="(3)MyFamily.html" class="dropdown-toggle" data-toggle = "dropdown">My Family <b class="caret"></b></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#"> Mother </a></li>  
 
       <li><a href="#"> Father </a></li>  
 
       <li><a href="#"> Younger Brother </a></li>  
 
       <li><a href="#"> Older Brother </a></li>  
 
       </ul> 
 
      </li> 
 
      <li><a href="(4)Contact.html">Contact Me</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

http://jsbin.com/weguya/edit?html,css,output

источник

2016-07-17 14:20:50

Огромное вам спасибо! –

Мое удовольствие :) Удачи .. –

Как изменить цвет фона при разрушении навигационной панели

ответ

Смежные вопросы