Divi Hamburger Menü Icon in ein „X“ ändern

von Nils

Das Premium WordPress-Theme Divi fügt dem mobilen Menü das „Hamburger-Icon“ hinzu. Per Touch-Klick gelangt der Nutzer dann an die Menüpunkte. So weit so gut. Leider bleibt das Hamburger-Icon auch bestehen, wenn es geöffnet wird. Die visuelle Rückmeldung zum schließen des Menüs fehlt. Diese unschöne Usability-Eigenschaft von Divi kannst Du mit ein wenig CSS-Code ganz einfach verbessern.

Wie verrate ich Dir im Video.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

CSS-Befehle

/* change Divi hamburger menu to X */
.mobile_nav.opened .mobile_menu_bar:before {
content: ‚\4d‘;
}

/* rotate the Divi Menu icon on click */

.mobile_menu_bar:before {
transition: all .4s ease;
transform: rotate(0deg);
display: block;
}

/* rotate the Divi Menu icon on click */

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

Newsletter

Impulse abonnieren

Der Newsletter wird ca. 1x im Monat versendet. Du kannst Dich jederzeit mit einem Klick abmelden. Weitere Informationen zur Nutzung Deiner Daten findest Du in der Datenschutzerklärung.

0 Kommentare

0 Kommentare

Einen Kommentar abschicken

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