Bootstrap Nav Font Color will not change

Question

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

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

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

Answer 2

Try using .nav.navbar-nav (without the space)

.nav.navbar-nav>li>a {

    color:  #FFFFFF;
}