Eigenes DIVI Hamburger Icon in der mobilen Ansicht verwenden / animieren

von | Okt. 16, 2024 | Allgemein | 0 Kommentare

Schlagwörter: DIVI

Heute zeige ich euch mal wie in in Divi in der mobilen Ansicht ihr euer Hamburgermenu austauschen könnt und zwar wechselt es vom klassischen Hamburger Icon zu einem von euch definierten und dreht sich dabei.

Hier erfahrt ihr wie das genau geht

Video

Icon suchen

Zuerst müsst ihr natürlich mal nach dem neuen Icon suchen und dafür verwenden wir die Icons die Divi bereits eingebaut hat – über 360 Icons warten dort auf euch. Geht dafür direkt auf die hier verlinkte seite (The Elegant Icon Font) und dann wenn ihr nach unten Scrolt seht ihr die grosse DIVI Icon Font Liste.

CSS Befehl

Baut einfach diesen CSS Code jetzt in euer style.css im Child-Theme ein. Im Code habe ich den Ort markiert, wo ihr dann euer Wunschicon eingeben könnt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* change divi hamburger menu to new icon */
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d"; /* hier icon auf wunsch austauschen*/
}
 
/* rotate divi menu icon on click */
 
.mobile_menu_bar:before {
	transition: all .4s ease;
	transform: rotate(0deg);
	display:block;
}
 
/* rotate 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

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

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