如何在导航栏折叠时更改背景颜色答案

【问题标题】：How to change background color as the navbar collapses如何在导航栏折叠时更改背景颜色
【发布时间】：2016-11-20 04:27:01
【问题描述】：

如何在折叠的导航栏上下移动时更改其背景颜色？我更改了 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;
  }
}

虽然折叠或返回压缩模式的操作仍在进行中，但背景颜色仍然是黑色，我希望它是我自定义引导程序的颜色。一旦它完成折叠，它就会进入我设置的背景色。

这是我的 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>

【问题讨论】：

我不确定我是否理解问题所在。你能把它画在屏幕截图上吗？我为你做了一个bin..（一旦你更新你的问题，nutify我。
@MoshFeu 尝试将浏览器调整为小尺寸，直到 navbar-right 部分变为带有 3 个水平条的图标，当您单击该图标时，列表的活动部分将具有黑色背景navbar-inverse 折叠时的样子
@MoshFeu here's the pic
你的意思是，黑色闪烁？因为一秒钟后背景变成了正确的颜色。
@MoshFeu 是的，这就是我的意思，我希望颜色保持为黄色/橙色。不知道怎么弄，昨天刚开始学bootstrap

标签： html css navbar collapse

【解决方案1】：

您需要使用 same 选择器作为引导程序，即：.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

【讨论】：

非常感谢！