Search code examples
htmlcssmaterialize

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


I want to create a navbar with a white background and black text, but have been unable to get the text in the links within the navbar to be anything but white.

Things I've tried:
- adding the class "black-text" to the li tags, to the ul tag, to the surrounding div and nav tags
- defining a class in my application.scss file for each li tag.
- adding li, nav, a { color: black; } to my application.scss file

Here is the html for the navbar:

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


Solution

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