Customize Navbar Collapse button

Question

How can i change the color of the collapse button there? and the white lines like the divider. here is the picture. Can someone help me? im new to css,bootstrap and html so please help me. or give me some ideas.

Here is my code.

<nav class ="navbar navbar-default" role= "navigation">
    <div class = "container">
        <div class ="navbar-header">
            <button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
                <span class="icon-bar" ></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>  
            </button>
        </div>

        <div class="collapse navbar-collapse" id="nav-collapse">

            <ul class="nav navbar-nav">
              <li class="active"><a href="index.html">Students</a></li>
              <li class="nav-divider"></li>
              <li><a href="#">Faculty</a></li>
              <li class="nav-divider"></li>
              <li><a href="#">About us</a></li>
              <li class="nav-divider"></li>
              <li><a href="#">Contact us</a></li>
              <li class="nav-divider"></li>

            </ul>

         </div>
     </div>
   </nav>

Here is my css.

       #fot{ position:fixed;
       bottom:0;

       }
      .navbar-default{
        background-color:rgb(193,57,45);

       }
      .navbar .nav > li > a{
       color:#ffe6e6;
       }
      .navbar .nav > li > a:hover{
        color:#000000;
        }
     .navbar .nav .active > a{
      background-color:rgb(193,57,45);
     color:#000000;
      }
    .navbar .nav .active > a:hover{
    background:none;
    color:#fff;
    }
  .nav .nav-divider{
  height: 50px;
  margin: 0 10px;
  border-right: 1px solid #a92419;
  border-left: 1px solid #c1392d;
  }
  @media(max-width: 768px) 
 {.nav .nav-divider{
  height: 1px;
 margin: 0 10px;
 background-color:#a92419;

  }
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
margin:0 0 4px;
width: 25px;
height: 5px;

 }

Answer 1

I guess this is what you are looking for:

.icon-bar
{
  background:green !important; /*Whatever colour you want for icon lines*/
}
.navbar-toggle
{
  background:yellow !important; /*Whatever colour you want for background */
}

In the CSS !important forces to apply property aside it over actual properties of Bootstrap CSS.

Update: In your CSS ADD Following code :

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: darkblue; /* Whatever Colour you want */
}

Answer 2

Yes ofcourse...just define some css on button class like this

CSS

button.navbar-toggle{
    background:none;
    border:none;
    color:#000;
    // and so on according to what style u want...
}

button.navbar-toggle span{
   background:#000;/*change accordingly*/
   // these span are for white line you can edit the lines in this css
}