ブートストラップのアイコンバー（☰）を変更する

Question

☰の色を変更したい。

HTML：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> 
    <span class="sr-only">Toggle menu navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 

私はいろいろなことを試してみました（怒鳴る見える）が、何も働きません。

CSS：

.icon-bar { 
    color: black; 
    border-color: black; 
    background-color: black; 
} 

Answer 1

のようなあなたのCSSが動作しない理由が原因specificityである!important

を使用して過乗っCSSを試してみてください。ブートストラップセレクタはあなたよりも高い特異性を持っているので、あなたのスタイルは完全に無視されます。

ブートストラップはセレクタでこれをスタイル付けします：.navbar-default .navbar-toggle .icon-bar。あなたは（あなたのCSSは、が含まれていると仮定のみ、従って

1のB特異値を有し、これを無効にするために、単に自分のCSSで同じセレクタを使用するのに対し、このセレクタは、3のB特異値を有しますブートストラップの）後：

.navbar-default .navbar-toggle .icon-bar { 
    background-color: black; 
} 

Answer 2

この

.icon-bar { 
    background-color:#FF0000 !important; 
} 

Answer 3

私は、あなたはまだこの問題に対する答えを探しているかどうかを知りませんが、今日、私は同じ問題が起こって、それを解決しました。 あなたは、HTMLコードで指定する

**<Div class = "navbar"**> 
     div class = "container"> 
       <Div class = "navbar-header"> 

または

**<Div class = "navbar navbar-default">** 
     div class = "container"> 
       <Div class = "navbar-header"> 

必要があるあなたは、あなたのCSS

.navbar-default-toggle .navbar .icon-bar { 
    background-color: # 0000ff; 
} 

でその場所を持って、私がやったことは

.navbar .navbar-toggle .icon-bar { 
    background-color: # ff0000; 
} 

の上に追加しました

m yのhtmlコードは

**<Div class = "navbar">** 
     div class = "container"> 
       <Div class = "navbar-header"> 

であり、あなたがファイルを関連付ける場合は以下/ CSS

ここにも、このセクションを検索し、変更したい色を置き、それ以外の場合は状態に自己正しいCSSファイルでしょうあなたのhtmlコードは私のようなもので、ナビゲーションバー、デフォルトされていない、あなたはCSSで行ったようにそれを追加した場合、それは

// Toggle Navbar 
@ Navbar-default-toggle-hover-bg: #ddd; 
**@ Navbar-default-toggle-icon-bar-bg: # 888;** 
@ Navbar-default-toggle-border-color: #ddd; 

前でした。

// Toggle Navbar 
@ Navbar-default-toggle-hover-bg: #ddd; 
**@ Navbar-toggle-icon-bar-bg : #888;** 
@ Navbar-default-toggle-icon-bar-bg: # 888; 
@ Navbar-default-toggle-border-color: #ddd; 

幸運

Answer 4

コーディングは1行だけで十分です。..ちょうどこれを試してみてください。ピクセルを追加することでアイコンバーの厚さをさらに調整することができます。私はブートストラップ& HTML5を使用しています

HTML

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span> 

    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 

    </button> 
    <a class="navbar-brand" href="#" <span class="icon-bar"></span><img class="img-responsive brand" src="img/brand.png"> 
    </a></div> 

CSS

.navbar-toggle, .icon-bar { 
    border:1px solid orange; 
} 

BOOM ...

Answer 5

。トグルボタンの外観をオーバーライドしたかったのです。

.navbar-toggle{ 
    background-color: #5DADB0; 
    color: #F3DBAA; 
    border:none;   
} 

.navbar-toggle.but-menu:link { 
    color: #F00; 
    background-color: #CF995F; 
} 

.navbar-toggle.but-menu:visited { 
    color: #FFF; 
    background-color: #CF995F; 
} 
.navbar-toggle.but-menu:hover { 
    color: #FFF0C9; 
    background-color: #CF995F; 
} 
.navbar-toggle.but-menu:active { 
    color: #FFF; 
    background-color: #CF995F; 
} 
.navbar-toggle.but-menu:focus { 
    color: #FFF; 
    background-color: #CF995F; 
} 

Answer 6

デュードは、私はあなたが感じる完全に方法を知っている、が、約インラインスタイリングを忘れないでください。それはほとんどCSS特異

のスーパーサイヤ人であるので、それはあなたのためにこのようになるはずです、どのブートストラップのバージョンを使用している

<span class="icon-bar" style="background-color: black !important;"> 
</span> 
<span class="icon-bar" style="background-color: black !important;"> 
</span> 
<span class="icon-bar" style="background-color: black !important;"> 
</span>