CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nethken
nethken

Reputation: 1092

Customize Navbar Collapse button

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.

enter image description here

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;

 }

Upvotes: 0

Views: 15307

Answers (2)

divy3993
divy3993

Reputation: 5810

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 */
}

Upvotes: 5

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

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
}

Upvotes: 1

Related Questions