bootstrap 3 navbar aktiv li nicht ändern Hintergrundfarbe

Ich habe benutzerdefinierte CSS für die aktive li-Element von Navbar hinzugefügt. Aber es scheint die Standardfarbe auszuwählen. Andere Farben wie Navbar BG und Textfarbe scheinen sich richtig zu ändern.bootstrap 3 navbar aktiv li nicht ändern Hintergrundfarbe

Die CSS-Regeln werden wie folgt geändert:

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

Die HTML ist:

<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>

Der Ausgang navbar ist wie folgt:

Navbar image

Quelle

2013-12-22 Abdul Ali

Sie hinzufügen müssen CSS zu .active anstelle von .active a.

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

Etwas wie folgt aus:

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

Quelle

2013-12-22 18:32:22 Ani

Vielen Dank für die Antwort. Das Problem besteht immer noch.:) .navbar-default.navbar-nav> .active { Farbe: # 8a0e0b; Hintergrund: # d65c14; } –

Können Sie eine Geige erstellen? .. Scheint für mich zu arbeiten. – Ani

Okay, hier geht: http://jsfiddle.net/mjyZQ/ – Ani

Haben Sie "Bootstrap-theme.css" Dateien auf Ihrem Code enthalten?

In "bootstrap-theme.min.css" -Dateien existiert ein Hintergrundbild über ".active" für "navbar" (siehe Screenshot: http://i.imgur.com/1etLIyY.png).

Es wird Ihren Style-Code erneut deklarieren, und dann wird es auf Ihrem Code bewirkt.

Nachdem Sie sie gelöscht oder neu deklariert haben (background-image), können Sie Ihre Hintergrundfarbe über das ".active" -Tag verwenden.

Quelle

2015-01-07 08:17:21

In Bootstrap 3.3.x stellen Sie sicher, dass Sie die scrollspy JavaScript-Funktion verwenden, um aktive Elemente zu verfolgen. Es ist einfach, es in Ihren HTML-Code aufzunehmen. Genau wie folgt vor:

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

In den meisten Fällen in der Regel ich aktive Elemente auf meine navbar verfolgen, so dass ich wie folgt vorgehen:

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

Jetzt in Ihrem CSS können Sie .navbar-fixed-top .active a Ziel:

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

Dies sollte funktionieren, wenn Sie aktive li Elemente in Ihrer oberen festen Navigationsleiste verfolgen.

Quelle

2015-05-23 11:43:31 moeabdol

Nun, ich hatte eine ähnliche Herausforderung. Mit dem inspect-Element-Tool in Firefox konnte ich das Markup und das CSS, das zum Stylen der Verknüpfung verwendet wurde, verfolgen, wenn darauf geklickt wurde. Beim Klicken erhält das Listenelement (li) die Klasse .open und es ist das Anker-Tag in der Klasse, das mit dem grauen Hintergrund formatiert ist.

Um dies zu beheben, fügen Sie dies einfach Ihrem Stylesheet hinzu.

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

Quelle

2015-08-09 21:00:07

In meinem eigenen bootstrap.css, die ich nach dem bootstrap.min.css dass nur laden, Schalter des Hintergrundbildes mit !important Arbeiten für mich:

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

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

Quelle

2017-07-26 16:34:37 cabanni

bootstrap 3 navbar aktiv li nicht ändern Hintergrundfarbe

Antwort

Verwandte Themen