Lesefortschritt:

Divi-Theme: Geöffnetes Mobilmenu mit einem «X» schliessen und/oder dieses Icon animieren

12. Februar 2023 | CSS-Stylesheet, Divi-Theme

Trick # 207 | Dieser Beitrag beinhaltet 303 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Normalerweise zeigt das Divi-Theme mobile Menüs mit einem so genanten «Hamburger». Egal, ob es geöffnet oder geschlossen ist. Mit einem kleinen Trick kann in geöffneten Mobilmenüs ein «X» angezeigt werden, welches zum Schliessen des Menüs einlädt.

Sie benötigen bloss nachfolgenden CSS-Code, der im Menu-Modul in die Mobile-Darstellung eingreift und den Sie in das CSS-Stylesheet Ihrer Word­Press-Installation einfügen. Unter Design/Customizer/Zusätzliches CSS:

.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}

Das war’s auch schon. Aber Sie haben noch eine zusätzliche Option:

Divi-Mobilmenü-Button animieren

Das Mobilmenü-Icon des Divi-Themes können Sie zusätzlich animieren. Einfach folgenden Code in das CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS einfügen:

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

.mobile_nav.opened .mobile_menu_bar::before {
	transition: all .4s ease;
	transform: rotate(90deg);
	display: block;
}
Schon drehen sich die Mobilmenu-Icons. Ein netter Effekt.

Werbung

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.