更改引导程序活动菜单项颜色

Question

我想更改菜单中活动元素的背景颜色。我尝试了很多解决方案，但我仍然无法做到这一点。 菜单和css：

/* MAIN SITE NAVIGATION */ 
 

 
.navbar.navbar-default { 
 
    font-size: 14px; 
 
    background-color: #FFFFFF; 
 
    border-bottom-width: 0px; 
 
} 
 
.navbar.navbar-default .navbar-nav { 
 
    background-color: #FFFFFF; 
 
} 
 
.navbar.navbar-default .navbar-nav>li>a { 
 
    color: #323232; 
 
    background-color: #FFFFFF; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
    letter-spacing: 1px; 
 
} 
 
.navbar.navbar-default .navbar-nav>li>a:hover, 
 
.navbar.navbar-default .navbar-nav>li>a:focus { 
 
    color: #50A0FF; 
 
    background-color: #FFFFFF; 
 
} 
 
.navbar.navbar-default .navbar-nav>.active>a, 
 
.navbar.navbar-default .navbar-nav>.active>a:hover, 
 
.navbar.navbar-default .navbar-nav>.active>a:focus { 
 
    color: #50A0FF; 
 
    background-color: #FFFFFF; 
 
} 
 
.navbar.navbar-default .navbar-nav li .active { 
 
    background-color: red !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
     <span class="sr-only">Pokaż MENU</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li class="dropdown-header">Nav header</li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      <li><a href="#">One more separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div> 
 
</nav> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Menu photo

我希望有人能帮助我。对于PS对不起我的英文:)

Answer 1

添加到您的CSS：

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus { 
    color: #50A0FF; 
    background-color: #ebebeb !important; 
    display:block; 
} 

Answer 2

尝试使用以下为您的元素，你想改变背景颜色

 .active a{ 
       background-color: green !important; 
     } 

Answer 3

你已经在做，在你的例。问题是你正在添加一个#ffffff背景。只需将其更改为另一个。

这是您的类样品

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus { 
    color: #50A0FF; 
    background-color: #FFFFFF; // change this to some color other than white 
} 

你还需要在你的style.css添加此风格

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a { 
    background-image: initial; 
} 

/* MAIN SITE NAVIGATION */ 
 
.navbar-default { 
 
    font-size: 14px; 
 
    background-color: #FFFFFF; 
 
    border-bottom-width: 0px; 
 
} 
 
.navbar-default .navbar-nav{ 
 
    background-color: #FFFFFF; 
 
} 
 
.navbar-default .navbar-nav>li>a { 
 
    color: #323232; 
 
    background-color: #FFFFFF; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
    letter-spacing: 1px; 
 
} 
 
.navbar-default .navbar-nav>li>a:hover, 
 
.navbar-default .navbar-nav>li>a:focus { 
 
    color: #50A0FF; 
 
    background-color: #FFFFFF; 
 
} 
 
.navbar-default .navbar-nav>.active>a, 
 
.navbar-default .navbar-nav>.active>a:hover, 
 
.navbar-default .navbar-nav>.active>a:focus { 
 
    color: #ffffff; 
 
    background-color: #000000; 
 
} 
 
.navbar-default .navbar-nav li .active { 
 
    background-color: red !important; 
 
}

<nav class="navbar navbar-default navbar-static-top"> 
 
      <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Pokaż MENU</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
      </div> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
       <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#about">About</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
        <li><a href="#">Action</a></li> 
 
        <li><a href="#">Another action</a></li> 
 
        <li><a href="#">Something else here</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li class="dropdown-header">Nav header</li> 
 
        <li><a href="#">Separated link</a></li> 
 
        <li><a href="#">One more separated link</a></li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
      </div><!--/.nav-collapse --> 
 
      </div> 
 
     </nav>

Answer 4

家伙，我已经删除了此line

<link rel="stylesheet" href="css/bootstrap-theme.min.css"/> 

，现在它正在努力:)