CSS Menu mit data-toggle in Bootstrap

[smallwall]

Hi,
hier habe ich ein Menü gefunden, dass super funktioniert, nur habe ich Probleme beim CSS-Styling

http://devphp.de/pgn/menu4.php

Wenn man auf ein Dropdown Item drückt, wird der Hintergrund des Ankers weiß. Welche Klasse müsste ich ändern, dass es auch grün bleibt, wenn man den Anker drückt? .dropdown-toggle ist es offensichtlich nicht, und auch die anderen Klassen, die ich probiert habe, haben keine Änderung gebracht. Ich kenne diese Mechanik mit data-toggle=... nicht wirklich.

Ist hier jemand CSS Experte, der mir kurz die Klasse nennen kann?

mfg

Ergänzung (7. März 2016)

Kann mir selbst antworten, .open ist es wohl nach einem kurzen Check im Firefox.

Nein, das zwar nah dran, aber auch falsch...

 

[siebling]

Du kannst das relativ simpel mit einer Ersetzung des Farbcodes (#eee) herausfinden, auch wenn der mehrfach auftaucht.

Ansonsten tippe ich aber dennoch auf einen der beiden folgenden Elementgruppen:

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover

oder

.nav > li >

 

[racer320kmh]

Es ist .nav>li>a:focus, .nav>li>a:hover
Ziemlich praktisch sind die Google Chrome Developer Tools, kannst mit F12 öffnen.
Der Firefox hat auch sowas integriert (Strg + Umschalt + C).

 

[smallwall]

Naja, nicht ganz, es ist wohl

.navbar .open a:focus und :hover

Trotzdem vielen Dank.

 

[smallwall]

Ich muss den Thread noch einmal ausgraben.

Ein neues Problem: Es springt mal wieder. Zwischen ca. 940px und 768px springt die Navigation. Bei höherer Fensterbreite ist alles ok.

http://devphp.de/pgnrewrite/index.php

Hier ist noch alles ok:

http://devphp.de/pgn/menu4.php

So sollte es sein, aber beim Einbau ist dieses springen aufgetaucht.

Hat jemand eine Idee warum, und wie man es fixen kann?

mfg

 

[siebling]

Wenn du mit "Springen" den Zeilenumbruch nach dem Titel "Schachdatenbank" meinst, der die Menüpunkte in einer neuen Reihe anzeigt: das liegt daran, dass es in deinem Beispiel mittlerweile zu viele Menüpunkte geworden sind und dementsprechend der Platz bei gewissen Fensterbreiten fehlt.

Ein möglicher Fix wäre den Wechsel auf einen einzigen Menüpunkt (aka die drei waagerechten Linien / Hamburger Icon) früher zu vollziehen oder eben das Menü anders zu strukturieren (weniger Menüpunkte, Titel "Schachdatenbank" woanders auslagern oder ähnliches).

 

[smallwall]

Es lag am "Titel". Habe den Titel jetzt gekürzt und es klappt wie es soll. Verstehe ich nicht ganz, es ist doch genügend Platz, auch mit 840px... Naja, egal. Es wäre auch prima, wenn ich die Breite selbst festlegen könnte, ab wann das Hamburger Icon erscheint.

 

[racer320kmh]

Geht, in dem du in den @media queries die Werte änderst.

 

[smallwall]

Puh, so gut kenn ich mich mit Bootstrap nicht aus. Und auch nicht mit den Media Queries. Hab nur irgendwann etwas gelesen von device-width... aber damit wird man nicht die Breite des Menüs anpassen können, sondern mit nem anderen Query.

 

[racer320kmh]

Du kannst unter http://getbootstrap.com/customize/#media-queries-breakpoints die Breakpoints verändern und die angepasste Bootstrap-Version runterladen. Das musst du aber selbst hosten, über einen CDN geht's natürlich nicht. Oder du installierst dir node.js, grunt und grunt-contrib-less. Dann kannst du dir per watch Plugin die Änderungen direkt in CSS kompilieren lassen. Wenn du lokal entwickelst, kannst du über browsersync den Browser automatisch die neuesten CSS Anpassungen sehen.