更改bootstrap导航栏右侧项目选择的颜色

Question

I'm using bootstrap for my project and I done some mofigication with my own CSS file. however I need to change bootstrap nav-bar right side items selected color. No matter how hard I tried it want change with my CSS file

 .navbar-static-top{ background-color: #3498db; } .navbar-brand { font-family: 'Lato', sans-serif; color:white; font-size: 190%; } body { font-size: 9px; } table-hover{ background-color: #FFF; } thead th { color: #FFF; text-align: Left; background-color: #3498db; font-size: 11px; } tbody td { height: 20px; padding: px px; font-size: 11px; text-align: right; } .vertical-center { background-color: #FFF; } .input-sm { font-size: 12px; color: black; } input[readonly] { background-color: #fff; /* any other styles */ } .nav li{ padding-right:10px; font-size: 120%; color: #FFF; } .nav.navbar-nav.navbar-right li a { color: #FFF; font-size: 120%; } .input-sm { height: 25px; padding: px px; font-size: 12px; } #submitbtn{ align: center; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } input[type=number] { -moz-appearance:textfield; } 

 <nav class="navbar navbar-default navbar-static-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Leave Application</a> <ul class="nav navbar-nav"> </ul> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> </ul> <ul class="nav navbar-nav navbar-right"> <li ><a href="sessionstart.php">My Leaves</a></li> <li class="active"><a href="request.php">Application</a></li> </ul> </div> </nav> 

and this is sample image how my site currently appeared in browser Link

I want change this gray color to white color with black text for selected item. how can I do this ?

Answer 1

May be the problem here with the linking your external css file and bootstrap file

you need place to them like this

so that browser read the last css update from the file.

Answer 2

now, try this. just add below code to your CSS.

.navbar-default .navbar-nav > .active > a {
    background: #000000;
    color: white;
}

Answer 3

As you provided the code it is working on codepen.

I think, the problem is css file not linked in HTML page.

Answer 4

Please try this:

nav.navbar .navbar-collapse ul.navbar-right li.active a {
  color: #000;
  background: #fff;
}

Answer 5

First of all make sure you are loading your custom css after bootstrap, otherwise it wont override it.

Secondly make sure that your css rules points to DOM element exactly the same or more specific then bootstrap does.

Personally I prefix parent node with my own id or class and refer to it in my css. This guarantees me that I always use more specific css declarations then bootstrap does.

But if it doesn't makes sense to you you can simply use !important after your css proporty, but I recommend avoiding it at all costs unless you exactly know that there is no other way