mmenu.js - mmenu (dk_mmenu) - width und background color anpassen

Das mmenu.js für ein mobiles Menu zu nutzen ist eine sehr einfache Sache. Bei Contao kann man dabei auf das modul mmenu (dk_mmenu) zurück greifen. Anpassungen (z.B. die Breite / width) am CSS sind nicht so einfach wie man es manchmal gerne hätte, daher hier ein paar Möglichkeiten:

Die Standardbreite ist auf 80 % mit max. 440 Pixel eingestellt. Dies passt meist gut, aber manchmal wird das Menü dann zu breit. Die Breite anzupassen ist möglich, mit folgendem CSS:

.mm-menu_offcanvas {
    width: 20% !important;
}

.mm-wrapper_opening .mm-menu_offcanvas ~ .mm-slideout {
    -webkit-transform: translate(20%, 0) !important;
      -moz-transform: translate(20%, 0) !important;
      -ms-transform: translate(20%, 0) !important;
      -o-transform: translate(20%, 0) !important;
      transform: translate(20%, 0) !important;
}

Der Lösungsbeitrag dazu findet sich hier: https://stackoverflow.com/a/34805908

Die Hintergrundfarbe des Menu anzupassen ist auch nicht immer so einfach, daher hier eine kleine Hilfestellung wie man dies mit CSS anpacken kann:

.mm-menu_theme-white {
    font-family:Open Sans,Arial,sans-serif,Helvetica;
    background-color: #0272c1;
    --mm-color-background: #0272c1;
    --mm-color-text: #fff;
    --mm-color-text-dimmed: #fff;
}

Im konkreten Fall wurde das White-Theme im Backend gewählt, daher die Ansteuerung mit .mm-menu_theme-white, wählt man das Dark-Theme lautet die Klasse natürlich .mm-menu_theme-dark

Zurück