Changing the text color on a nav bar using Materialize CSS (rails)

As adding a style change to the html will work I would recommend staying within the materializecss framework that you have chosen.

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

The default to this nav bar background color is pink, but just add one of the built in colors/shades and you will get very cool effects.

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

Now my nav bar has a light blue background color. Same applies to the text.

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

This will produce a card panel with blue text. Hope this helps.

Answer based on http://materializecss.com/color.html


Try this on the brand to have a black text:

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

Try this with rails, I worked for me, So if you modify the style. see in full page.

<!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>