ヘッダーの色とドロップダウンをクリックしたときの背景色変更について

ヘッダーの色をグレーから黒、ドロップダウンをクリックしたときの背景色を黒からオレンジ(#FF8C00)に変えたいんですけど方法がわかりません。
教えていただけませんか？
Rails 5.1.6
ruby 2.4.1p111

<custom.scss>


.dropdown{
  ul{
    background-color: #FF8C00;
  }
}

.caret{
  background-color: #FF8C00;
}

<_header.html.erb>


<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "baseball.com", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "ホーム", root_path %></li>
        <li><%= link_to "球団一覧", baseball_path %></li>
        <li><%#= link_to "Help", help_path %></li>
        <% if logged_in? %>
          <li><%= link_to "ユーザー", users_path %></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              アカウント <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><%= link_to "プロフィール", current_user %></li>
              <li><%= link_to "設定", edit_user_path(current_user) %></li>
              <li class="divider"></li>
              <li>
                <%= link_to "ログアウト", logout_path, method: :delete %>
              </li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "ログイン", login_path %></li>
        <% end %>
      </ul>
    </nav>
  </div>
</header>

試したこと

<scss>

.container{
  li{
    color: black;
  }
}

.dropdown-toggle{
  background: #FF8C00;
}

このようにしてもどちらも変わりませんでした

m.ts10806

2018/10/24 03:59

サーバーサイドの言語、フレームワークなどあるようですので、環境情報としてタグと本文にバージョンなど追記してください

m.ts10806

2018/10/24 04:00

cssもscssですかね？

ikt_erk122

2018/10/24 04:11

修正したんですけどこれでいいでしょうか？

m.ts10806

2018/10/24 04:11

タグにも追加お願いしますね。

ikt_erk122

2018/10/24 04:24

すみません、よく理解できていないんですけどどうすればいいですか？

m.ts10806

2018/10/24 04:30

質問投稿するときにHTML、CSSとタグをつけられていますよね。タグは５つまでつけることができるので、関連するジャンルや言語などなるべくタグをつけた方が良いです。質問を確認するときに「自身が得意とするジャンルやカテゴリー」から見て回答する人が多いとは思いますが、今回の対応はhtml,cssだけでは対応しきれない可能性もあります。要はタグをきちんとつけることでそれだけ専門知識を持った人の目にとまりやすくなるということです。あと細かいですがクラス名は「ドロップダウン」になっているので質問内容も合わせた方が良いですね

x_x

2018/10/24 04:31

Bootstrapを使っているのであれば「Bootstrap」タグをつけてください

行動規範の内容に同意します

回答1件

ベストアンサー

Bootstrap を使っているという前提で

CSS
1.dropdown.show > .dropdown-toggle {
2  background-color: #ff8c00;
3}

-- 質問文の変更によりBootstrapのバージョンが3、かつnavbar内と判明したので追記

CSS
1.navbar-nav > .dropdown.open > a.dropdown-toggle {
2  background-color: #ff8c00;
3}

-- ドロップダウン開閉時に兄弟要素に"related"クラスをつけ外しする例を追記

jQuery
1$(document).on('shown.bs.dropdown hidden.bs.dropdown', '.dropdown', function(event) {
2  const target = $(event.target);
3  target.siblings().toggleClass('related', target.hasClass('open'));
4});

投稿2018/10/24 04:32

編集2018/10/25 08:53

x_x

総合スコア13749