我正在使用Wordpress的Bootstrap。我的导航栏项目输出很好,但我希望每个单独的菜单项是不同的颜色。Bootstrap假定所有菜单项具有相同的初始、活动和悬停颜色。我想我的ACTIVE菜单颜色是不同的。这可能吗?
我试图在我的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>
您可以使用指定的id:
来定位每个单独的<li>
:
#menu-item-73 > a,
#menu-item-73.active > a {
background: red;
}
但是,如果你的页面/文章改变了id,上面的css选择器将不起作用。
查看FIDDLE
.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
}
}
更新try @navbarBackgroundHighlight
in 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
文件。