How to change background color as the navbar collapses

How do you change the background-color of the collapsed navbar as it goes up and down? I have changed a few parts of 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;
  }
}

While the action of collapsing down or going back to compressed mode is still ongoing, the background-color remains black and I want it to be the color of my customized bootstrap. Once it's done collapsing, it goes to the bg-color that I set.

Here's my html code:

<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>

Solution

You need to use the same selector as bootstrap does which is: .navbar-inverse .navbar-nav>.active>a that's how your style will override the bootstrap's style.

<!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