...

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.

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, Websites und visuelle Kommunikation.

Get Social!

Letzte Beiträge

WordPress Membership erstellen: Dein Leitfaden mit WishList Member
WordPress Membership erstellen: Dein Leitfaden mit WishList Member

  Möchtest Du einen erfolgreichen WordPress Membership Bereich erstellen? Mit WishList Member hast Du ein mächtiges Tool an der Hand, das Dir hilft, Deine Inhalte zu schützen und Deine Mitglieder effektiv zu verwalten. In diesem Blogbeitrag zeige ich Dir, wie Du...

ThriveCart Pro mit Frau am Laptop

ThriveCart Pro+* – Das beste Zahlungstool, ohne Verkaufsgebühren – jetzt kaufen und meinen Online-Kurs gratis erhalten.
mehr erfahren