0

我正在使用带有 Wordpress 的 Bootstrap。我的导航栏项目输出正常，但我希望每个单独的菜单项都是不同的颜色。Bootstrap 假定所有菜单项都将具有相同的初始、活动和悬停颜色。我希望我的活动菜单颜色不同。这可能吗？

我试图在我的css中定位 current_page_item 但似乎没有覆盖默认的 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>

4

2 回答 2

0

<li>您可以使用分配的 id来定位每个人：

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

但是，如果您的页面/帖子更改 id，则上述 css 选择器将无效。

查看小提琴。

于 2013-05-13T15:58:18.053 回答
0 
.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为新变量文件，在那里我更改所有变量。接下来我创建一个新文件夹，其中有我的, , 并在其中包含 3 个文件：variables.less
@import "variables.less";viariables.lessstyles.lessstyles.less

/*
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-13T15:58:25.627 回答