Bootstrap 3 navbar active li не меняет цвет фона

Я добавил пользовательский CSS для активного элемента li navbar. Но, кажется, он выбирает цвет по умолчанию. Другие цвета, такие как navbar BG и цвет текста, по-видимому, имеют правильные изменения.

Измененные правила CSS следующие:

.navbar-default {
    background-color: #7b431a;
    border-color: #d65c14;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #8a0e0b;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #8a0e0b;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #8a0e0b;
    background-color: #d65c14;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #8a0e0b;
    background-color: #d65c14;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #8a0e0b;
    border-bottom-color: #8a0e0b;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #8a0e0b;
    border-bottom-color: #8a0e0b;
}
.navbar-default .navbar-toggle {
    border-color: #d65c14;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #d65c14;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

HTML:

<nav class="navbar navbar-default navbar-fixed-top">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Poducts</a></li>
                    <li class="active"><a href="#">Gallery</a></li>
                </ul>

            </nav>

Выходная панель навигации выглядит следующим образом:

Navbar image

Ответы

Ответ 1

Вам нужно добавить CSS в .active вместо .active a.

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

Что-то вроде этого:

.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;
}

Ответ 2

В Bootstrap 3.3.x убедитесь, что вы используете функцию scrollspy JavaScript для отслеживания активных элементов. Легко включить его в свой HTML. Просто выполните следующие действия:

<body data-spy="scroll" data-target="Id or class of the element you want to track">

В большинстве случаев я обычно отслеживаю активные элементы на моем навигаторе, поэтому я делаю следующее:

<body data-spy="scroll" data-target=".navbar-fixed-top" >

Теперь в вашем CSS вы можете настроить таргетинг .navbar-fixed-top .active a:

.navbar-fixed-top .active a { 
    // Put in some styling 
}

Это должно работать, если вы отслеживаете активные элементы li в своей верхней фиксированной навигационной панели.

Ответ 3

В моем собственном bootstrap.css, который я загружаю после bootstrap.min.css только для этого, для меня работает переключение фонового изображения с !important:

.navbar-nav li a:hover, .navbar-nav > .active > a {
  color: #fff !important;

  background-color:#f4511e !important;
  background-image: none !important;
}

Ответ 4

Ну, у меня была аналогичная задача. Используя инструмент проверки элементов в Firefox, я смог отслеживать разметку и CSS, используемые для стилизации ссылки при нажатии. При щелчке элементу списка (li) присваивается класс .open, и это тег привязки в классе, который отформатирован с серо-цветным фоном.

Чтобы исправить это, просто добавьте это в таблицу стилей.

.nav .open > a
{
    background:#759ad6;
    // Put in styling
}

Ответ 5

Включили ли вы файлы "bootstrap-theme.css" в свой код?

В файлах "bootstrap-theme.min.css" для "navbar" существует фоновое изображение ".active" (отметьте этот снимок экрана: http://i.imgur.com/1etLIyY.png).

Он будет повторно объявлять ваш код стиля, а затем он будет действовать на ваш код.

Итак, после удаления или повторного объявления их (фоновое изображение) вы можете использовать свой стиль фона для ".active" тега.