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.