Bootstrap – Navbar für alle Screens im Mobile-Look
|Will man die Bootstrap-Navbar für alle Screen-Größen immer im Mobile-Look, überschreibt man am besten das default Bootstrap CSS. Hier ein Beispiel.
Durch folgenden Code für Bootstrap 3 wird festgelegt, dass die eingeklappte Navigationsleiste immer verwendet wird, indem die Bootstrap @media-Abfragen überschrieben werden.
.navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin: 7.5px -15px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; }
Hier eine Demo für Bootstrap 3: https://www.bootply.com/114896
Für Bootstrap 4 genügt es, der Navbar die CSS-Klasse navbar-toggleable zu entziehen.
Demo für Bootstrap 4: https://www.codeply.com/go/LN6szcJO53
Ich hoffe wie immer, diese erstbeste Lösung war hilfreich.