Hanny Hanny - 2 months ago 11
CSS Question

Bootstrap Nav Font Color will not change

My HTML Nav:

<nav class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="nav navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Treasures Reading</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Early Childhood <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#early_childhood_little_treasures">Little Treasures</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kindergarten <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#kindergarten_big_books">Big Books</a></li>
<li><a href="#kindergarten_decodable_books">Decodable Books</a></li>
<li><a href="#kindergarten_a">A</a></li>
<li><a href="#kindergarten_o">O</a></li>
<li><a href="#kindergarten_b">B</a></li>
<li><a href="#kindergarten_trade_books">Trade Books</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">1st Grade <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#first_grade_anthology">Anthology</a></li>
<li><a href="#first_grade_big_books">Big Books</a></li>
<li><a href="#first_grade_decodable_books">Decodable Books</a></li>
<li><a href="#first_grade_a">A</a></li>
<li><a href="#first_grade_o">O</a></li>
<li><a href="#first_grade_b">B</a></li>
<li><a href="#first_grade_trade_books">Trade Books</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2nd Grade <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#second_grade_anthology">Anthology</a></li>
<li><a href="#second_grade_decodable_books">Decodable Books</a></li>
<li><a href="#second_grade_a">A</a></li>
<li><a href="#second_grade_o">O</a></li>
<li><a href="#second_grade_b">B</a></li>
<li><a href="#second_grade_trade_books">Trade Books</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">3rd Grade <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#third_grade_anthology">Anthology</a></li>
<li><a href="#third_grade_a">A</a></li>
<li><a href="#third_grade_o">O</a></li>
<li><a href="#third_grade_b">B</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">4th Grade <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#fourth_grade_anthology">Anthology</a></li>
<li><a href="#fourth_grade_a">A</a></li>
<li><a href="#fourth_grade_o">O</a></li>
<li><a href="#fourth_grade_b">B</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">5th Grade <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#fifth_grade_anthology">Anthology</a></li>
<li><a href="#fifth_grade_a">A</a></li>
<li><a href="#fifth_grade_o">O</a></li>
<li><a href="#fifth_grade_b">B</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">6th Grade <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#sixth_grade_anthology">Anthology</a></li>
<li><a href="#sixth_grade_a">A</a></li>
<li><a href="#sixth_grade_o">O</a></li>
<li><a href="#sixth_grade_b">B</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>


I added my own css style sheet to override the bootstrap like so in the :

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />


My stylesheet looks like this:

html {
min-height:100%;
}
body {
padding-top: 70px;
height: 100%;
background: #E0EAFC; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #91bef8, #E0EAFC); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #91bef8, #E0EAFC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91bef8', endColorstr='#E0EAFC');
}

.navbar-custom{
border-width: 2px;
border-bottom-width:4px;
border-bottom-color:White;
border-bottom-style: solid;
background: #E0EAFC; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #91bef8, #002f6c); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #91bef8, #002f6c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91bef8', endColorstr='#002f6c');
}

.nav {
background: #E0EAFC; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #91bef8, #002f6c); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #91bef8, #002f6c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91bef8', endColorstr='#002f6c';
}

.nav .navbar-nav>li>a {

color: #FFFFFF;
}


As you can see - just trying to get the font to display in plain white.

The other selections take hold appropriately - but the last selector in there does not apply the appropriate font color.

I've tried all sorts of various changes but I can't get it to change!

Answer

First, your CSS is invalid, because in the selector .nav for style filter you are missing ) at the end of value.

Second, you want to change the color of the title Treasures Reading? Then this code would do it:

.nav.navbar-header a {
    color:  #FFFFFF;
}
Comments