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