Navigation mit Bootstrap 3

Bootstrap hat sich in den vergangenen Jahren als Quasi-Standard für die Gestaltung responsiver Webseiten etabliert. Es ist recht leicht, ein Menu im Header der Seite zu gestalten, dass bei kleinen Endgeräten mit der Hand ebenso zu bedienen ist wie auf Desktop Rechnern mit der Maus.
Hier finden Sie ein Beispiel für das TypoScript einer Navigation über drei Ebenen.

Über die Klasse .navbar-default überschreibt man das Standard Layout von Bootstrap.
In diesem Fall wird die Farbe auf das Projekt angepasst und die Border entfernt. Zudem erhalten die Links eine eigene Farbe.

.navbar-default {
  background-color: #478FAD;
  border: none;
}

ul > li.active > a {
  background-color: #478FAD;
}

Über diese CSS Klassen werden verschiedene Zustände der Bootstrap Navigation überschrieben: der Standard Link, die aktive Zustand und die geöffnete Seite in einem Dropdown Menu.

.navbar-default .navbar-nav > .active > a {
  background-color: #1877A0;
  color: #fbe1df;
}
.navbar-default .navbar-nav > .active > a:hover {
  background-color: #0C506D;
  color: #46BCF0;
}
.navbar-default .navbar-nav > .active > a:active, 
.navbar-default .navbar-nav > .active > a:focus {
  background-color: #119BD7;
  color: #efefef;
}
.navbar-default .navbar-nav > .open > a:active,
.navbar-default .navbar-nav > .open > a:visited,
.navbar-default .navbar-nav > .open > a:focus {
  color: #fff;
  background-color: #119BD7;
}
.navbar-default .navbar-nav > li > a {
  color: #52BBE7;
}
.navbar-default .navbar-nav > li > a:hover {
  color: #7CD4F9;
}

.dropdown.open > a {
  color: #99D9F5;
  background-color: #26B6F4;
}
.dropdown.open > ul > li > a {
  color: #99D9F5;
}
.dropdown-menu {
  background-color: #26B6F4;
  padding: 0;
  border: none;
  border-radius: 0;
}
.dropdown-menu > li > a {
  color: #069BDB;
}
.dropdown-menu > li > a:hover {
  color: #069BDB;
  background-color: #229ACD;
}

#navbar > ul > li.dropdown.active.open > ul > li > a {
  color: #8FDDFE;
}
#navbar > ul > li.dropdown.active.open > ul > li.active > a {
  background-color: #1877A0;
  color: #59CAFA;
}
#navbar > ul > li.dropdown.active.open > ul > li > a:hover {
  background-color: #229ACD;
  color: #59CAFA;
}
#navbar > ul > li > ul > li > a {
  color: #BAE9FD;
}
#navbar > ul > li > ul > li > a:hover {
  color: #1877A0;
  background-color: #BAE9FD;
}

Der Standard der Navigation lässt sich mit Google Fonts überschreiben, die über das TypoScript Setup geladen werden.

#navbar {
  font-family:  Lexend Deca, Montserrat, Verdana, Geneva, Arial;
}

Bootstrap bietet die Möglichkeit, die Navigation am oberen Rand des Browserfensters zu fixieren. Dies führt dazu, dass die oberen Inhalte unter dieser Navigation verschwinden. Dies kann man umgehen, wenn man den Rest der Webseite um ca. 45 Pixel nach unten verschiebt.

body {
  padding-top: 45px;
}