Menu
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>
427
The text color of the navigation bar can be changed using two inbuilt classes: navbar-light: This class will set the color of the text to dark. This is used when using a light background color. navbar-dark: This class will set the color of the text to light.
You can change color of your navbar by just adding name of color as a class you can pick colors from Colors. If you want the color header of the menu to be same as navbar use . navbar-full class with your <aside> tag.
Text-color property is used to set the color of the text. Text-color can be set by using the name “red”, hex value “#ff0000” or by its RGB value“rgb(255, 0, 0).
Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
