FAQ & News

Deine Wissensquelle für Web & WordPress
Im Blog Archiv findest du sämtliche Beiträge zu Webdesign, Hosting, WordPress-Tipps und digitalen Trends. Durchsuche Themen nach Kategorien oder nutze die Übersicht, um genau das zu finden, was dich aktuell interessiert. 

So fügen Sie den Text „Menü“ neben dem Divi Hamburger-Menü hinzu

Das Hamburger-Menü ist auf mobilen Geräten oft das einzige sichtbare Navigationselement. Wenn du deinen Besuchern klarer zeigen möchtest, dass sich dahinter das Hauptmenü verbirgt, kannst du mit einem kleinen CSS-Snippet einen Text wie „Menü“ oder „Navigation“ direkt neben dem Symbol einfügen. In diesem Tutorial zeige ich dir, wie du das sowohl für das Standard-Divi-Menü als auch für ein Menü im Theme Builder umsetzt.

1. Text neben dem Hamburger-Menü im Standard-Divi-Menü hinzufügen

Wenn du das Standardmenü von Divi verwendest (ohne Theme Builder), füge das folgende CSS-Snippet in deinem WordPress Dashboard unter
Divi > Theme Optionen > Benutzerdefiniertes CSS ein:

/* Menütext für Standardmenü */
#et_mobile_nav_menu:before {
  content: 'Menü';             /* Text, der neben dem Hamburger-Symbol angezeigt wird */
  font-size: 14px;             /* Schriftgröße */
  position: absolute !important;
  bottom: 29px;                /* Abstand nach unten */
  right: 40px;                 /* Positionierung rechts vom Symbol */
  color: #000000;              /* Textfarbe */
}

Wenn du einen anderen Text bevorzugst, kannst du das Wort 'Menü' einfach anpassen, z. B. in 'Navigation' oder 'Start'.
Auch die Farbe und Position kannst du individuell ändern, um sie an dein Design anzupassen.

2. Text neben dem Hamburger-Menü im Theme Builder hinzufügen

Wenn du ein benutzerdefiniertes Menü im Divi Theme Builder verwendest, funktioniert das Styling über einen leicht angepassten Selektor.
Füge dafür dieses Snippet ebenfalls unter Divi > Theme Optionen > Benutzerdefiniertes CSS ein:

/* Menütext für benutzerdefiniertes Menü (Theme Builder) */
.et_mobile_nav_menu:before {
  content: 'Menü';             /* Text, der angezeigt wird */
  font-size: 14px;
  position: absolute !important;
  top: 4px;                    /* Abstand nach oben */
  right: 40px;
  color: #000000;
}

Damit erscheint der Menütext oberhalb oder rechts vom Hamburger-Symbol – je nach Design deines Headers. Du kannst die Werte für top oder right anpassen, um die perfekte Ausrichtung für dein Layout zu finden.

3. Tipps für ein sauberes Design

  • Verwende möglichst kurze Texte wie „Menü“ oder „Navigation“ – zu lange Wörter können auf kleineren Displays umbrechen.
  • Wenn du ein helles Hintergrundbild hast, nutze eine kontrastreiche Schriftfarbe (z. B. #ffffff).
  • Teste dein Menü nach der Anpassung auf verschiedenen Geräten (iPhone, Android, Tablet), um sicherzugehen, dass Position und Lesbarkeit passen.

4. Fehlerbehebung

Wenn der Text nicht erscheint, prüfe bitte Folgendes:

  • Cache-Plugins leeren (z. B. WP Rocket, LiteSpeed Cache).
  • Browser-Cache löschen oder im Inkognitomodus testen.
  • Überprüfen, ob du den CSS-Code korrekt in den Theme-Optionen gespeichert hast.

Fazit

Mit wenigen Zeilen CSS kannst du dein mobiles Divi-Menü deutlich verständlicher gestalten, indem du den Text „Menü“ oder einen anderen Hinweis neben dem Hamburger-Symbol platzierst.
Diese kleine Änderung verbessert die Benutzerfreundlichkeit erheblich – besonders für weniger technisch versierte Besucher. Wenn du Hilfe bei der Anpassung deines Divi-Headers brauchst, melde dich gerne unter hello@mikas.at.

 0 0