使用Materialise CSS（導軌）更改導航欄上的文本顏色

我想創建一個具有白色背景和黑色文本的導航欄，但一直無法讓導航欄內的鏈接中的文本變成白色。使用Materialise CSS（導軌）更改導航欄上的文本顏色

事情我已經嘗試：
- 添加類「黑色文本」的李標籤，以UL標記的，對周圍的股利和導航標籤
- 在我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>

來源

2015-11-16 Torie

如果我們要幫助調試，您需要向我們展示您的CSS。 HTML示例也會受益於真正的鏈接 - SO不處理ERB或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>

來源

2015-11-17 13:05:22 MBahamondes

這工作完美！非常感謝：） – Torie

試試這對品牌有一個黑色文本：

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

來源

2016-01-21 06:26:20

添加一個風格轉換到HTML將工作我會建議materializecss框架內保持該你已經選擇。

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

默認這個導航欄的背景顏色是粉紅色，但只是添加了內置的色彩/色調之一，你會得到非常酷的效果。

<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的答案

來源

2016-05-07 05:14:43

使用Materialise CSS（導軌）更改導航欄上的文本顏色

回答

相關問題