Twitter Bootstrap nav отдельные пункты меню цвета

Question

Я использую Bootstrap с Wordpress. Элементы моего навигатора, выводящие отлично, но я хочу, чтобы каждый отдельный элемент меню был другого цвета. Bootstrap предполагает, что все пункты меню будут иметь тот же начальный, активный и цветный цвет. Я хочу, чтобы мои цвета меню ACTIVE отличались друг от друга. Это возможно?

Я попытался настроить target_page_item в моем css, но, похоже, не перезаписывает defaul twitter .navbar-inverse .nav .active> a, definition. Есть идеи? Код ниже ...

<div class="navbar navbar-inverse navbar-fixed-top"> 
<div class="navbar-inner"> 
    <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="#">Menu Item 1</a></li> 
    <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-52 current_page_item active menu-item-85"><a href="#">Menu Item 2</a></li> 
    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="#">Menu Item 3</a></li> 
</div> 

Answer 1

Вы могли предназначаться каждого отдельного <li> с помощью присвоенного ID:

#menu-item-73 > a, 
#menu-item-73.active > a { 
    background: red; 
} 

Однако, если ваша страница/после изменения идентификатора, выше селектор CSS будет не имеют никакого эффекта.

Проверьте FIDDLE.

Answer 2

.navbar .navbar-inner > .active > a, 
.navbar .navbar-inner > .active > a:hover, 
.navbar .navbar-inner > .active > a:focus { 
    // your style 
} 

или менее файла:

.navbar .navbar-inner > .active { 
    > a, > a:hover, > a:focus { 
     // your style 
    } 
} 

Update
попробовать @navbarBackgroundHighlight в variables.less
Я использую самозагрузки, и, прежде чем я начать новый проект, я изменить в нескольких файлах @import "variables.less"; к новым переменным файл, где я изменяю все переменные. Затем я новую папку создающих, где у меня есть мой viariables.less, styles.less, и в styles.less я есть 3 файла:

/* 
Theme Name: name 
Theme URI: http://www.domain.co.uk/ 
Description: Template for your website. 
Author: me 
Author URI: http://www.domain.co.uk/ 
Version: 1.0 

General comments (optional). 
*/ 
@import "variables.less"; 
@import "../../_scripts/bootstrap/less/bootstrap.less"; 
@import "../../_scripts/bootstrap/less/responsive.less"; 

// your own css code 
.header { .. } 

И я составляю только style.less, которые дают мне style.css файл.