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

Klicken Sie auf den unteren Button, um den Inhalt von ActiveCampaign zu laden.

Inhalt laden

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.

22 Website Tipps

22 Website-Tipps

Mache Deine Website sofort attraktiver für neue Kunden!

You have Successfully Subscribed!