CO2 Reduktion / Icon / Ökologischer FussabdruckWir reduzieren CO2
Rechtsfraagen IconAbmahnung? Nicht mit uns!
Newsletter IconAnmeldung zum Newsletter
Nach oben scrollen

Avada – Breakpoint für das mobile Menü anpassen

Das Avada-Theme für WordPress ist (neben Divi und Enfold) eines der meistgenutzten Multi-Purpose-Themes. Ich mache immer wieder Kundenseiten damit. Auch wenn ich selbstgecodete Themes den fertigen Produkten gegenüber bevorzuge (Die Performance ist deutlichst besser, wenn man alles selbst macht. Sorry…) muss man zugeben, dass Avada recht OK ist.

Seltsamer Weise habe ich bis jetzt im Adminbereich noch keine Einstellmöglichkeit gefunden, um den Breakpoint des mobilen Menüs zu ändern. Deshalb schreibe ich hier eine Anleitung.

Die Basics beim Thema „Avada – Breakpoint für das mobile Menü ändern“:

Mit „Breakpoint ändern“ meine ich den Moment an dem das Desktop-Menü ausgeblendet wird und das Smartphone-Menü gezeigt wird, gegenüber den ursprünglichen Einstellungen zu verändern.

Warum sollte man das tun wollen?
Das Ändern des Breakpoints kann manchmal recht wichtig sein, weil eventuell das Desktop-Menü zu viele Inhalte hat und auf einem kleinen Bildschirm dann zweizeilig dargestellt wird. Für Responsive-Webdesign ist das eines der grundsätzlichsten Dinge.

Gibt es einfache Änderungen um dieses Problem zu beheben?
Ja, die gibt es. Man z. B.:
– Texte in den Menüpunkten kürzen
– Menüpunkte entfernen
– die Schriftgröße ändern
– den Abstand zwischen den Buchstaben verringern

Oder dann doch den Breakpoint anpassen
Führt all das nicht zum gewünschten Ergebnis, wäre die letzte Möglichkeit den Breakpoint zu ändern und eigentlich sollte man das im Theme einstellen können. Eigentlich… sollte… ;) Na ja. Ich habe dazu noch nichts entdeckt und habe daher ein bisschen Code geschrieben, den man 1:1 übernehmen kann und in die CSS-Datei des Childthemes reinkopiert, falls man den Breakpoint auf 900px setzen möchte. Für alle anderen Breiten muss man einfach die Zahl 900 bzw. 901 im Code durch die gewünschte Pixelbreite ersetzen. Statt 900px und 901px also 1000px und 1001px

Und hier mein Code für Avada:

/* BREAKPOINT MOBILE MENU ÄNDERN */
@media all and (min-width: 901px) {
.fusion-main-menu {
display: block!important;
}

.fusion-mobile-navigation {
display: none !important;
}
}

@media all and (max-width: 900px) {
.fusion-main-menu {
display: none!important;
}

.fusion-mobile-menu-icons {
display: block !important;
margin-top: 8px !important;
}

}

Fragen dazu beantworte ich gerne in den Kommentaren, Sie können mich auch direkt kontaktieren, damit ich Sie bei der Anpassung Ihres WordPress-Themes unterstützen kann.

* Pflichtfelder

Mit der Nutzung dieses Formulars erklären Sie sich mit der Speicherung und Verarbeitung Ihrer Daten durch diese Website einverstanden. Weitere Informationen erhalten Sie in unserer Datenschutzerklärung

Weiterlesen

Ein Kommentar zu “Avada – Breakpoint für das mobile Menü anpassen”

  • Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.