Заполнение верхней части заголовка (с цветом) без изменения навигационной панели

Question

я задал вопрос здесь несколько дней назад:

Overriding Bootsrap with custom CSS related to search forms

, что связанно с заголовком бутстраповского нав, что блестяще ответили на Чарли. Он помог мне затянуть код, связанный с моим заголовком и навигацией. Здесь была его рабочей скрипка:

https://jsfiddle.net/8yufLL4n/

код прекрасно работает, но я хочу, чтобы заполнить в остальной части заголовка с тем же цветом BG # 30302f устранить серый цвет, который приходит стандарт в начальной загрузке CSS, сохраняя при этом положение заголовка как есть.

Любые мысли о том, какой элемент заполнить остальную часть маски для маскировки этого пространства с этим цветом?

CSS здесь:

.container { 
    background:#30302f; 
} 

.container a{ 
    color: #ffffff; 
    font-size: 18px; 
    font-weight: bold; 
    padding: 14px 10px; 
    text-transform: uppercase; 
} 

.container a:hover{ 
    text-decoration: underline; 
    color: #ffffff; 
} 


.menuIcon { 
    background:rgb(200,200,200); 
} 

.navbar-brand { 
    height:auto; 
} 

#brandImage { 
    max-width:60%; 
} 

@media (max-width:600px) { 

    .navbar-brand { 
    width:95%; 
    padding:8px 2.5%; 
    } 

    #brandImage { 
    max-width:100%; 
    } 
} 

@media (min-width:990px) and (max-width:1200px) { 
    .navbar-brand { 
    width:250px; 
    } 
} 

Примечание стороны: Мой цвет текста еще оттенки серого, а не белый, а украшение парения не изменяется. Является ли bootstrap также переопределением?

Еще раз спасибо!

Answer 1

Вам просто нужно установить цвет navbar-default:

.navbar-default { 
    background-color: #30302f; 
} 

Для цвета шрифта, используйте:

.navbar-default .navbar-nav>li>a { 
    color: #fff; 
} 
.navbar-default .navbar-nav>li>a:hover { 
    color: red; 
} 

Пример скрипку: https://jsfiddle.net/8yufLL4n/3/