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