Hamburger Menü
Achtung, diese Seite wurde für HTML 5 geschrieben. Scheinbar verwenden Sie
einen alten Browser, der das nicht unterstützt. Es kann sein, dass nicht alle
Seiten korrekt angezeigt werden. Sie sollten unbedingt eine aktuelle Version Ihres Browsers installieren.
Beispiel im wesentlichen kopiert von
http://getbootstrap.com/components/#navbar-default
Mit Bootstrap 4 scheint das nicht zu funktionieren, aber wir wollen sowieso 3 verwenden, derzeit keine Ursachenforschung
Generelle Style Änderungen (Überschreiben von Bootstrap CSS durch eigene zusätzliche Klassen)
- .navbar-rr>li>a { padding-top:4px; padding-bottom:4px; color:white}
- .navbar-rr { min-height:auto; }
- .navbar-rr .navbar-nav>li>a { color:white; }
- .dropdown-toggle-rr { color:white ;}
Beispiel nun modifiziert, mit 0 gekennzeichnete Menüpunkte klappen nicht ein, die mit 1 verschwinden im Hamburger Menü
- Search Form deaktiviert
- Dafür zusätzliche Menüpunkte
- Menü-Items nun durch class=btn
- Rechts nur noch der Home-Link
- Bis zu 3 Links Link 0x (x=a,b,c) bleiben bei schmalen Bildschirmen erhalten
- bei <li> die class navbar-brand entfernt (Color, Height)
Zum Vergleich des Layouts eine Kopie des Menüs von oben mit ein paar Anpassungen
- bei <nav> die class='container' durch class='navbar navbar-default' ersetzt