Twitter Bootstrap nav個人菜單項目顏色

我使用Bootstrap和Wordpress。我的導航欄項目輸出很好，但我希望每個單獨的菜單項都是不同的顏色。 Bootstrap假定所有菜單項都具有相同的初始，活動和懸停顏色。我希望我的主菜單顏色有所不同。這可能嗎？Twitter Bootstrap nav個人菜單項目顏色

我試圖在我的css目標current_page_item，但似乎沒有overwrte默認twitter .navbar-inverse .nav .active> a，定義。有任何想法嗎？下面的代碼...

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

來源

2013-05-13 lowercase

您可以通過使用分配的ID針對每個個體<li>：

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

但是，如果你的頁面/後更改ID，上面的CSS選擇器會沒有效果。

檢查出FIDDLE。

來源

2013-05-13 15:58:18 JAM

這是完美的，因爲ID不會改變。不知道我能直接瞄準李的目標。非常感謝！ – lowercase 2013-05-13 16:03:44

很高興幫助:) – JAM 2013-05-13 16:08:33

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

更新
嘗試@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文件。

來源

2013-05-13 15:58:25 miszczu

這是我試圖重寫的風格。可以重寫這個嗎？ – lowercase 2013-05-13 16:00:20

Twitter Bootstrap nav個人菜單項目顏色

回答

相關問題