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

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.

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;
}