Torie Torie - 2 years ago 1682
HTML Question

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

Answer Source

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

<!DOCTYPE html>

<link rel="stylesheet" href="">
<!-- Compiled and minified JavaScript -->
<script src=""></script>
nav ul li a{
  color: black;

<header class="top-nav">

<div class="navbar-fixed">
    <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>


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download