0

railsでbootstrapを使っている初学者です。
デバイスを用意た本の投稿サイトを作成しています。
ヘッダーのナビゲーションメニューのリンクの色を白に変えたいのですがと記述したりscssでリンクの変更もしましたが色が変わりません。

<body>
    <header>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark ">
      <!--div class= "container"-->

    <span><%= link_to "Bookers", root_path  %></span>

    <form class= "form-inline ml-auto">
      <% if user_signed_in? %>
      <li class= "list-unstyled">
         <i class="fas fa-home"></i>
         <%= link_to "Home", root_path  %>
         </li>
      <li class="list-unstyled">
        <i class="fas fa-users"></i>
        <%= link_to "Users", users_path  %>
      </li>
      <li class="list-unstyled">
        <i class="fas fa-book-open"></i>
        <%= link_to "Books", books_path  %>
      </li>
      <li class="list-unstyled">
        <i class="fas fa-sign-out-alt"></i>
        <%= link_to "Log out", destroy_user_session_path, method: :delete %>
      </li>

      <% else %>

      <li class= "list-unstyled">
        <i class="fas fa-home"></i>
         <%= link_to "Home",root_path %>
      </li>

      <li class= "list-unstyled">
         <i class="fas fa-link"></i>
         <%= link_to "About", about_path %>
      </li>
      <li class="list-unstyled">
        <i class="fas fa-user-plus"></i>
        <%= link_to "Sign up", new_user_registration_path %>
      </li>
      <li class= "list-unstyled">
        <i class="fas fa-sign-in-alt"></i>
        <%= link_to "Log in", new_user_session_path %>
      </li>
<% end %>
   </form>
      </ul>
    </nav>
   </div>
</header>
     <% flash.each do |key, value| %>
    <%= content_tag(:div, value, class: "#{key}") %>
  <% end %>

    <%= yield %>
   
  </body>

</html>

1 件の回答 1

0

SCSSに以下のコードを追加してみてください。

.navbar .nav-item a,
.navbar .navbar-brand 
{
   color: white !important;
}

.navbar .nav-item a:hover 
{
   color: rgba(255, 255, 255, 0.8) !important;
}

ナビゲーションメニュー内のリンクとブランドのテキスト色を白に設定、マウスオーバーしたときの色も指定しています。
 !importantを使用して、既存のBootstrapスタイルが強制で上書きされます。

1
  • 解決しました。ありがとうございました。
    – pon
    Commented 2023年5月25日 13:02

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。