Responsive Menu Drupal 8 mit Bootstrap Theme

Drupal Theming

Das Bootstrap Theme bietet in Drupal 8 bereits eine Navigationsregion, die in der Mobile Anzeige als Hamburger Menu angezeigt wird. Allerdings können keine Unterpunkte in der Navigation angezeigt werden.

Dazu muss das Responsive and off-canvas menu installiert werden. Nach Installation des Moduls und den benötigten Libraries und dem Anpassen der übersichtlichen Einstellungen funktioniert das Menu in Core Themes wie Bartik einwandfrei, allerdings nicht mit einem Bootstrap Theme.

Damit das Menu auch in Bootstap funktioniert braucht es zwei kleine Anpassungen:

  1. Wenn das Hauptmenu responsive sein soll, den Code im Template menu--main.html.twig mit dem Code für ein Menu Item aus dem Core Theme Classy ersetzen. Für ein anders Menu muss das das Template menu.html.twig editiert werden.
  2. Bootstrap rendert die Navigation nicht in einem div sondern mit einem nav Tag. Die CSS Anweisungen für das Hamburger Menu können aber im style.css überschrieben werden. 
/**  * Overwrite responsive Menu css  */   
@media all and (min-width: 768px) { 
  nav.responsive-menu-block-wrapper { 
    display: block;
  }
  .responsive-menu-toggle-icon {
  display: none;
  }
}

Neuen Kommentar hinzufügen

Kategorie
Published: May 2017