web-dev-qa-db-ja.com

bootstrapのアイコンバー（☰）の色を変更する

色を変えたい.

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;
}
csstwitter-bootstrapcss-specificity
37
a1204773

CSSが機能しないのは、 specificity が原因です。 Bootstrapセレクタはあなたよりも高い特異性を持っているため、スタイルは完全に無視されます。

ブートストラップは、セレクター.navbar-default .navbar-toggle .icon-barでこれをスタイルします。このセレクターにはB特異性値3がありますが、あなたのセレクターにはB特異度1。

したがって、これをオーバーライドするには、CSSで同じセレクターを使用します（CSSが含まれていると仮定しますafterBootstrap's）：

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

CSSのオーバーライドを使用して!importantを使用してください

このような

.icon-bar {
   background-color:#FF0000 !important;
}
7
Prasanth K C

コーディングは1行で十分です。これを試してみてください。ピクセルを追加することで、アイコンバーの太さを調整できます。

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

ブーム...

2
Midun

私はあなたの気持ちを完全に知っていますが、インラインスタイリングを忘れないでください。それはほとんど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>
0
Wong Seng Wee

BootstrapおよびHTML5を使用しています。トグルボタンの外観をオーバーライドしたかった。

.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;
}
0
Sylviamc

あなたがまだこの問題に対する答えを探しているかどうかはわかりませんが、今日私は同じ問題を起こして解決しました。 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;
}

私のHTMLコードは

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

ファイルless/cssを関連付ける場合

このセクションを検索し、変更したい色をここに配置します。そうしないと、cssファイルが以前の状態に自己修正されます

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

あなたのhtmlコードが私のものに似ていて、navbar-defaultではない場合は、cssで行ったように追加します。

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

幸運を

0
jesusratti