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

Divi Hamburger Icon

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

0 Kommentare

Einen Kommentar abschicken

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

Deine Daten werden gemäß Datenschutzerklärung verarbeitet.

Nils

Ich bin Nils…

Experte für Memberships und visuelle Kommunikation.

Get Social!

Letzte Beiträge

Mitgliederbereich erstellen | Online-Kurse + Community Plattform
Mitgliederbereich erstellen | Online-Kurse + Community Plattform

Als Online-Unternehmer:in möchtest du deinen Nutzern die Möglichkeit bieten, auf exklusive Online-Kurse zuzugreifen und an einer Community teilzunehmen. Ein Mitgliederbereich (auch Membership genannt) auf deiner WordPress-Website ist die Lösung, um diese Bedürfnisse...