質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.20%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 7,213

nekomura

score 132

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

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

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

背景の色を周りと同じにして、アイコンを白く表示させたいのですが、背景色が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="#">menu2</a></li>
                                <li><a href="#">menu3</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;
}*/


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2016/09/14 18:59

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

    キャンセル

  • popobot

    2016/09/14 19:03 編集

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

    キャンセル

  • nekomura

    2016/09/15 10:56

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

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

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

    キャンセル

回答 3

checkベストアンサー

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/16 11:01

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

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

    キャンセル

  • 2016/09/16 11:27

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

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

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

    キャンセル

  • 2016/09/16 11:50

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

    キャンセル

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/15 11:15

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

    キャンセル

  • 2016/09/15 13:46

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

    キャンセル

  • 2016/09/16 11:04

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/16 11:02

    gin様

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • CSSに関する質問
  • 【Bootstrap css】ドロップダウンボタンの背景色cssで指定してもが変わらない【アイコン】