Wordpress上的Bootstrap菜单

我试图在链接处于活动状态时使用自定义CSS来更改导航栏的颜色，但是当我点击另一个页面时它不适用。Wordpress上的Bootstrap菜单

#custom-navbar.navbar-default .navbar-brand { 
    color: rgba(119, 119, 119, 1); 
} 
#custom-navbar.navbar-default { 
    font-family: 'Open Sans Condensed', sans-serif; 
    font-size: 22px; 
    background-color: rgba(47, 46, 46, 1); 
    border-width: 0px; 
    border-radius: 0px; 
} 
#custom-navbar.navbar-default .navbar-nav>li>a { 
    color: rgba(255, 255, 255, 1); 
    background-color: rgba(47, 46, 46, 1); 

} 

#custom-navbar.navbar-default .navbar-nav>li>a:hover, 
#custom-navbar.navbar-default .navbar-nav>li>a:focus { 
    color: rgba(0, 0, 0, 1); 
    background-color: rgba(255, 255, 255, 1); 
} 
#custom-navbar .navbar-default .navbar-nav>.active> a, 
#custom-navbar.navbar-default .navbar-nav .parent>li>a:focus{ 
    color: rgba(0, 0, 0, 1); 
    background-color: rgba(255, 255, 255, 1); 

} 

#custom-navbar.navbar-default .navbar-toggle { 
    border-color: #ffffff; 
} 
#custom-navbar.navbar-default .navbar-toggle:hover, 
#custom-navbar.navbar-default .navbar-toggle:focus { 
    background-color: #ffffff; 
} 
#custom-navbar.navbar-default .navbar-toggle .icon-bar { 
    background-color: #ffffff; 
} 
#custom-navbar.navbar-default .navbar-toggle:hover .icon-bar, 
#custom-navbar.navbar-default .navbar-toggle:focus .icon-bar { 
    background-color: #2f2e2e; 
}

我也发布我创建的网站，如果你喜欢有一个观点，并有一个更好的主意。 Website link

在此先感谢

来源

2015-12-07 ivhysenbelli

使用此

#custom-navbar.navbar-default .navbar-nav>li>a:active{ 
    background-color: #056B28; 
}

来源

2015-12-07 18:32:54 Firefog

的'！important'后缀是不需要的，应该永远是最后的手段。 – isherwood

@isherwood感谢提示：P – Firefog

你的选择是不够具体。这：

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover { 
    color: #555; 
    background-color: #e7e7e7; 
}

受此覆盖：

#custom-navbar.navbar-default .navbar-nav>li>a { 
    color: rgba(255, 255, 255, 1); 
    background-color: rgba(47, 46, 46, 1); 
}

如果您使用基本语句中的ID选择，你需要在一个覆盖还使用一个ID选择。

#custom-navbar.navbar-default .navbar-nav>.active>a, 
#custom-navbar.navbar-default .navbar-nav>.active>a:focus, 
#custom-navbar.navbar-default .navbar-nav>.active>a:hover { 
    color: #555; 
    background-color: #e7e7e7; 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

来源

2015-12-07 18:33:25 isherwood

尝试过，但三个元素是一个主页，当它被加载时，它将所有这些设置为活动状态。我只想活跃一个被点击的人。 – ivhysenbelli

这没有意义。只有一个元素应该是活动的。显然你有更大的问题。 – isherwood

当我使用WordPress的菜单是从它集成菜单，所以当我是存档页面，并点击导航栏的其他元素之一，我必须有一个完全指定的地址为该元素。这就是导致所有元素都活跃的原因。任何想法我应该如何改变它？ – ivhysenbelli

Wordpress上的Bootstrap菜单

回答

相关问题