自定義導航欄折疊按鈕

Question

我該如何更改折疊按鈕的顏色？ 白線像分隔線。 這是圖片。 有人能幫我嗎？ 我是CSS，bootstrap和html的新手，請幫助我。 或給我一些想法。

這是我的代碼。

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

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

我想這就是您要尋找的東西：

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

在CSS中， !important力量是將屬性應用到Bootstrap CSS的實際屬性之外。

更新：在您的CSS ADD中添加以下代碼 ：

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

Answer 2

是的，當然...只需在按鈕類上定義一些CSS

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