In diesem kurzen Tutorial zeigen wir dir, wie du das Hamburger-Icon im mobilen Menü des DIVI-Themes so anpassen kannst, dass sich das ‚☰‘-Icon in ein ‚X‘ transformiert, sobald das Menü geöffnet wird.

CSS Code einfügen

Die Anpassung ist wirklich schnell umgesetzt. Du musst nur diesen CSS-Code-Schnipsel in den Einstellungen des DIVI-Themes hinterlegen:

.mobile_menu_bar::before {
	display: block;
	transition: all .4s ease;
}
.mobile_nav.opened .mobile_menu_bar::before {
	content: "M";
	transform: rotate(90deg);
}

Variante 1: Über die DIVI Theme-Optionen

Mit dem DIVI-Theme kannst du ganz einfach eigenen CSS-Code über die Theme Options einfügen. Navigiere dazu im WordPress-Backend zu DIVI → Theme Options und im ersten Reiter unter “Custom CSS” kannst du deinen eigenen CSS-Code einfügen.

Variante 2: Child Theme verwenden

Was ist ein Child-Theme?

Das haben wir in diesem Tutorial erklärt: Wie erstelle ich ein WordPress Child-Theme?

Fun Fact:
Das Hamburger-Menü heißt so, weil die 3 Striche des Icons an einen Hamburger erinnern.

So einfach kann es gehen! In diesem Tutorial hast du gelernt, wie du das Hamburger-Icon im DIVI-Menü mit einer simplen CSS-Anpassung ändern kannst.

Bei Fragen, Anregungen oder Problemen kannst du uns gerne einen Kommentar hinterlassen. Wir helfen dir gerne. Hat dir der Beitrag weitergeholfen? Bitte bewerte ihn mit einem Klick auf die Sterne.