よろしくお願いいたします。
レスポンシブデザイン対応の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="#">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; }*/
何か指定するクラスが違っているのかなど、ご指摘やご教示をいただきたく存じます。
有職者の皆様、どうぞよろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー