web-dev-qa-db-ja.com

マテリアライズCSS（レール）を使用してナビゲーションバーのテキストの色を変更する

背景が白でテキストが黒のナビゲーションバーを作成したいのですが、ナビゲーションバー内のリンクのテキストを白以外のものにすることができませんでした。

私が試したこと：
-クラス「black-text」をliタグ、ulタグ、周囲のdivタグとnavタグに追加します
-各liタグのapplication.scssファイルでクラスを定義します。
-li、nav、a {color：black;を追加します。 }私のapplication.scssファイルに

ナビゲーションバーのhtmlは次のとおりです。

  <header class="nav">
    <nav>
      <div class="nav-wrapper white">
        <a href="/" class="brand-logo black-text">GlobalPursuit</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><%= link_to "Pursuits", pursuits_path %></li>
          <li><%= join_dashboard_path %></li>
          <li><%= login_logout_path %></li>
          <li><%= trips_cart_display %></li>
        </ul>
      </div>
    </nav>
  </header>
htmlcssmaterialize
6
torie

これをRailsで試してみました、私のために働いたので、スタイルを変更した場合全ページを参照してください。

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
  
<style>    
nav ul li a{
  color: black;
}    
</style>
</head>

<body>
<header class="top-nav">

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper white black-text">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>
</div>

</header>
<main></main>
<footer></footer>
</body>
</html>
5
MBahamondes

HTMLにスタイル変更を追加すると機能するため、選択したmaterializecssフレームワーク内にとどまることをお勧めします。

<div class="nav-wrapper"></div>

このナビゲーションバーの背景色のデフォルトはピンクですが、組み込みの色/色合いの1つを追加するだけで、非常にクールな効果が得られます。

<div class="nav-wrapper blue lighten-1></div>

これで、ナビゲーションバーの背景色が水色になります。同じことがテキストにも当てはまります。

<div class="card-panel">
      <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
</div>

これにより、青いテキストのカードパネルが作成されます。お役に立てれば。

http://materializecss.com/color.html に基づく回答

9
Edwin Carra

ブランドでこれを試して、黒いテキストを作成してください。

<a href="#" class="brand-logo black-text">Logo</a>
2
user5819622

マテリアライズライブラリはnav ul aレベルで色を白として定義しているようです：

nav ul a {
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    font-size: 1rem;
    color: #fff;
    display: block;
    padding: 0 15px;
    cursor: pointer;
}

これを上書きするには、nav <a>の実際の<ul>タグにmaterialize text-colorクラスを追加する必要があります。

<nav>
    <div class="nav-wrapper white">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a class="black-text" href="sass.html">Sass</a></li>
        <li><a class="black-text" href="badges.html">Components</a></li>
        <li><a class="black-text" href="collapsible.html">Javascript</a></li>
        <li><a class="black-text" href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>
0
quinlo