Brighten up navbar text

By default, the "brightness" for bootstrap 4 navbar text is halved as compared with the background. That makes text against the standard background "themes" (dark, primary, success, etc) hard for my old eyes to see. It's basically a 20-something eye chart.

A better way would be to brighten it up a bit and let the text be pure white (or black, if you're using a light background), and let it dim on hover.

An example. First, the HTML:

<link rel="stylesheet" href="css/home.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
	<a class="navbar-brand" href="/">Casa Lembo</a>				
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
	    <span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="myNavbar">
	    <ul class="navbar-nav">
		<li class="nav-item">
		    <a class="nav-link" href="https://www.reuters.com" target="_blank">Global News</a>
		</li>
                <li class="nav-item">
                    <a class="nav-link" href="https://www.indyweek.com" target="_blank">Local News</a>
          	</li>
             </ul>
      	 </div>
      </nav>
   </body>
 </html>

The key bit of code here is line 2:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

The default CSS used by bootstrap 4 will create a horizontal navbar with a blue background and very light text for the menu items. By comparison, the logo should be bright white. The menu items will brighten slightly when moused over. This is all a result of the interaction between bootstrap 4's navbar handler and its theme engine (the theme engine coming into play with the specifying of a "bg-" element).

Note that selecting a dark background ("navbar-dark") will automatically cause the color of the text to be the inverse, so the result will be light colored text (bootstrap 3's "navbar-inverse" no longer does anything).

This is what the CSS that controls the brightness of the text looks like:

.navbar-dark .navbar-nav .nav-link {
   color: rgba(255.255.255,.5);
}

So adding the following custom CSS will make the text bright white:

.navbar-dark .navbar-nav .nav-link {
   color: white;
}

A much more readable result, I think.

plembo/BrightenNavbarText.md

Brighten up navbar text