Bootstrap Navbar not customizing

Question

I can't seem to figure out where I am going wrong in my code. The navbar is supposed to appear at the top of my page in a bluish/indigo color with white font, but instead is coming out as a normal inverse navbar (black and white). Any help is greatly appreciated! Here is my css code for my navbar:

.navbar-inverse {
background-color: #1A237E;
background-image: none;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #1A237E;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: #1A237E;
}

.navbar-inverse .navbar-nav .open .dropdown-menu> li> a,
.navbar-inverse .navbar-nav .open .dropdown-menu {
    background-color: #303F9F;
    color:#eeeeee;
}

.navbar-inverse .navbar-nav .open .dropdown-menu> li> a:hover {
    color:#000000;
}

Here is my HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"    data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="index.html">Ristorante Con Fusion</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="index.html">
                        <span class="glyphicon glyphicon-home"  aria-hidden="true"></span> Home
                    </a>
                </li>
                <li class="active">
                    <a href="aboutus.html">
                        <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> 
                        About
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                     role="button" aria-haspopup="true" aria-expanded="false">
                     Menu <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Appetizers</a></li>
                        <li><a href="#">Main Courses</a></li>
                        <li><a href="#">Desserts</a></li>
                        <li><a href="#">Drinks</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Specials</li>
                        <li><a href="#">Lunch Buffet</a></li>
                        <li><a href="#">Weekend Brunch</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav> 

Thank you!

Answer 1

Thank you all so much for our help! When I opened the inspector I saw my css file wasn't showing completely and stopped before a class I wasn't using. I deleted that section of my css file and the rest of the file appeared in the inspector, including the navbar. Thanks for helping a newbie!

Answer 2

I dropped your HTML and CSS into a Bootstrap Template JSFiddle. Everything appears to be fine, and the navigation bar appears to be blue with white text.

Make sure you load your custom stylesheet after the Bootstrap stylesheet or your CSS will get overwritten.