Bootstrap Navbar не настраивается

Question

Я не могу понять, где я ошибаюсь в своем коде. Предполагается, что navbar появится в верхней части моей страницы в голубоватом/индиго с белым шрифтом, но вместо этого выйдет как обычный инверсный навигатор (черно-белый). Любая помощь очень ценится! Вот мой CSS код для моей навигационной панели:

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

Вот мой 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> 

Спасибо!

Answer 1

Я бросил ваш HTML и CSS в шаблон Bootstrap JSFiddle. Все кажется прекрасным, и панель навигации выглядит синим цветом с белым текстом.

Убедитесь, что вы загрузили свою таблицу стилей после таблицы стилей Bootstrap, или ваш CSS будет перезаписан.

Answer 2

Спасибо всем большое за нашу помощь! Когда я открыл инспектора, я увидел, что мой файл css не показывался полностью и остановился перед классом, который я не использовал. Я удалил этот раздел моего файла css, а остальная часть файла появилась в инспекторе, включая навигационную панель. Спасибо, что помогли новичкам!