【Bootstrap css】ドロップダウンボタンの背景色cssで指定してもが変わらない【アイコン】

Question

よろしくお願いいたします。
レスポンシブデザイン対応のwebページを作っています。
開発環境はEclipseの動的webプロジェクトです。

現在、ナビゲーションウィンドウは以下の画面のような見た目になっています。
少し細かい事なのですが、うまくcssが反映してくれず、検索したても方法が見つけられなかったので
こちらで質問させて頂く事にしました。
赤丸で囲んであるドロップダウン部分について、表題の件の質問です。

![
アイコンだけを置いてただのリンクボタンに設定していたときは良かったのですが（ナビバーと同じ背景色でした）、ドロップダウンボタンにした際に該当部分の背景が回りと違う色になってしまいます。

背景の色を周りと同じにして、アイコンを白く表示させたいのですが、背景色がCSSを書いても変わりません。
※ドロップダウン部分にはFont Awesomemeからbarsのアイコンを使用して、
ボタンのように見せています。

該当部分のソースは以下です。
htmlクラス

<!-- top nav -->
<nav class="navbar navbar-default navbar-fixed-top">

    <div class="container">

        <div class="navbar-header">

            <!-- logo img -->
            <a class="navbar-brand" href="">
                <img src="images/html.png" id="logo-img">
            </a>

            <!-- toggle -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>

        <!-- top menu -->
        <div class="collapse navbar-collapse" id="top-nav">

            <!-- main navbar -->
            <ul class="nav navbar-nav">
                <li><a href="inquiry.html">お問い合わせ</a></li>
            </ul>

            <!-- right navbar -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href=""><i class="fa fa-sign-in"></i> ログイン</a></li>
                <li><a href="">製品情報</a></li>
                <li><a href="">デバイス情報</a></li>
                <li><a href="">サポート</a></li>
                	<li class="dropdown active">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"><span class="fa fa-bars fa-large" aria-hidden="true"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li><a href="#">menu</a></li>
								<li><a href="#">menu２</a></li>
								<li><a href="#">menu３</a></li>
							</ul>
					</li>
            </ul>
        </div>
    </div>
    <!-- end container -->
</nav>
<!-- end nav -->

** cssクラス **（コメント部分もお読みください）

/*NAVメニュー*/
.navbar{
    border-radius: 0;
    border: none;
    background-color: #003355; <--! ここで背景色を設定しており、該当箇所をドロップダウンにする前は3本線のアイコン部分の背景色もこの色でした -->
}

#logo-img{
    height: 20px;
}

.navbar-default .navbar-nav >li > a{
    color: #fff;
}

.navbar-default .navbar-nav >li > a:hover{
    color: #aaa;
}

.google-icon{
   max-width: 180px;
   height: auto;

}

.dropdown-toggle{ <--! ←出来ない -->
	background-color: #003355;
}


/*.fa{  <--! ←アイコンは白くなるのですが、現在は背景が白となってしまっているの為、可視性の為に実際はコメントアウトしています。 -->
	color:white;
}*/

何か指定するクラスが違っているのかなど、ご指摘やご教示をいただきたく存じます。
有職者の皆様、どうぞよろしくお願いいたします。

Comments

[退会済みユーザー]

当方の環境で、提示頂いたソースを試したところ、.dropdown-toggleのbackground-colorは#003355に変わりました。ブラウザのデベロッパーツールで別のスタイルが上書きしてしまっていないか、確認してみてはどうでしょうか？

[popobot]

現状のナビバーの紺色などは自前のCSSですか？　全体的なHTMLやCSSがわからないと回答難しいですね。自分もブラウザのデベロッパーツールで調べるのが一番いいと思います。

[nekomura]

miz様
icchii様
早々の修正依頼に対し、追記がおそくなり申し訳ありません。
ドロップダウンの部分以外のソースを追記したので、ご確認のうえ再度アドバイスを頂ければ幸いです。

icchii様
>現状のナビバーの紺色などは自前のCSSですか？
自前のcssといいますと、自分で記述したものかという意味でよろしいでしょうか？（理解が悪く申し訳ありません）。

ドロップダウンの部分以外のソースを追記したので、ご確認のうえ再度アドバイスを頂ければ幸いです

Answer 1

もしかして、クリックしたときの背景色が変わらないということでしたか？
であれば、ちょっと乱暴ですけど、以下の様な感じにBootstrapのスタイルを上書きですかね。

.nav .open>a.dropdown-toggle,
.nav .open>a.dropdown-toggle:focus,
.nav .open>a.dropdown-toggle:hover,
.nav>li>a.dropdown-toggle:focus,
.nav>li>a.dropdown-toggle:hover {
	background-color: #003355;
}

Comments

[退会済みユーザー]

コード例を少し修正しました。デベロッパーツールで見て、乱暴に上書きしただけなので、質問者様もツールで確認してみてください。

[nekomura]

miz様
>クリックしたときの背景色が変わらないということでしたか？
いいえ、デフォルトでの背景色をバーと同じ #003355にしたいという意味です。
ちなみに、頂いたサンプルコードも試したところ、きちんとmiz様の意図された動作となりました。
修正依頼の内容についてですが、デベロッパーツールの使い方にまだ慣れていないせいもありまだ追記をどのように書けばよいか分からない状態です。
頂いたアドバイスをもとに試行錯誤中ですので、また追記後には何かしらご教示を頂ければ幸甚です。
早々のご回答に対し返答が遅くなり申し訳ございません。
どうぞよろしくお願いいたします。

[popobot]

デベロッパーツールをある程度使えるようになるのが一番の近道のような気がします。
詳しく使い方が書いてあるサイトがたくさんあるので参考にして、問題の要素にどのCSSの設定が適用されているかを調べてみてはどうでしょうか。
http://www.buildinsider.net/web/chromedevtools/01

[nekomura]

icchii様
urlありがとうございます。

[nekomura]

miz様
一旦解決いたしました。
為になるご回答、いつもありがとうございます。
ネットでは気づけなかった知識やテクニックをご教示いただけるのでとても助かっております。

Answer 2

軽く試してみたのですが、こんな感じでうまくいかないでしょうか

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    background-color: #003355;
}

Comments

[nekomura]

icchii様
頂いたサンプルコードを試したところ、希望通りの結果となりました。
ありがとうございます。

まだ、＞の使い方等慣れていない為、このご回答を元に何が良くなかったのかを考えてきちんと習得していきたいと思います。
どうもありがとうございました。

[popobot]

うまくいってよかったです！
自分がやったことを、以下のサイトの用語を元に軽く解説しておきます。
http://www.buildinsider.net/web/chromedevtools/01

1. 虫眼鏡アイコンで色がおかしい要素を選択します。
2. 要素の属性／スタイルの確認でStyleグループをみたところ、bootstrap.cssが背景色を設定しているのを確認しました。
3. そのbootstrap.cssの要素指定をコピーして、自前のCSSに貼り付けて、背景色を#003355と指定し直しました。

※自分もCSSとかそんなに詳しくはない方ですが、BootstrapのCSSを修正するぐらいだったら、こんな感じでいつもやっています。

[nekomura]

icchii様
参考サイト初め、修正のテクニックのご教示ありがとうございます！
一人で調べていてもまだ迷走する事が多いので、とても助かります。

Answer 3

.dropdown-toggleにbackground-image: none;を追加してみてください。
background-colorの上にbackground-imageを敷くのでbackground-imageで何か(グラデとか)していたらbackground-colorは効かないです。

Comments

[nekomura]

gin様

無事に解決いたしました。
ご回答に感謝いたします。