Bootstrap 3 navbar active li not changing background-color

后端未结

关注

 6  1025

I have added custom CSS for the active li element of navbar. But it seems to be picking the default color. Other colors such as navbar BG and text color seems to have change

相关标签:

6条回答

别跟我提以往

2020-12-24 03:28
In Bootstrap 3.3.x make sure you use the scrollspy JavaScript capability to track active elements. It's easy to include it in your HTML. Just do the following:
```
<body data-spy="scroll" data-target="Id or class of the element you want to track">
```
In most cases I usually track active elements on my navbar, so I do the following:
```
<body data-spy="scroll" data-target=".navbar-fixed-top" >
```
Now in your CSS you can target .navbar-fixed-top .active a:
```
.navbar-fixed-top .active a { 
    // Put in some styling 
}
```
This should work if you are tracking active li elements in your top fixed navigation bar.
0 讨论(0)
发布评论:

提交评论
- 加载中...
醉话见心

2020-12-24 03:29
In my own bootstrap.css that I load after the bootstrap.min.css only that, switch of the background image with !important works for me:
```
.navbar-nav li a:hover, .navbar-nav > .active > a {
  color: #fff !important;

  background-color:#f4511e !important;
  background-image: none !important;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
余生分开走

2020-12-24 03:30
in my case just removing background-image from nav-bar item solved the problem
```
.navbar-default .navbar-nav > .active > a:focus {
    .
    .
    .


    background-image: none;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
醉酒成梦

2020-12-24 03:43
Well, I had a similar challenge. Using the inspect element tool in Firefox, I was able to trace the markup and the CSS used to style the link when clicked. On click, the list item (li) is given a class of .open and it's the anchor tag in the class that is formatted with the grey color background.

To fix this, just add this to your stylesheet.
```
.nav .open > a
{
    background:#759ad6;
    // Put in styling
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
一向

2020-12-24 03:43

Did you include "bootstrap-theme.css" files on your code?

In "bootstrap-theme.min.css" files, background-image about ".active" is existed for "navbar" (check this screenshot: http://i.imgur.com/1etLIyY.png).

It will re-declare your style code, and then it will be effected on your code.

So after you delete or re-declare them (background-image), you can use your background color style about the ".active" tag.

0 讨论(0)
发布评论:

提交评论
- 加载中...

误落风尘

2020-12-24 03:53

You need to add CSS to .active instead of .active a.

Fiddle: http://jsfiddle.net/T5X6h/2/

Something like this:

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

0 讨论(0)