Změna ikony menu hamburgeru v Elementoru

Pokud už vás omrzel standardní vzhled hamburgeru a chcete ho vyměnit za text, obrázek nebo jakoukoliv jinou ikonu, použijte následující kódy.

Tento kód vymění hamburger za text MENU

.elementor-menu-toggle i:before {
content: "MENU";
}

Tento kód vymění ikonku “X” za text ZAVŘÍT

.elementor-menu-toggle.elementor-active i:before {
content: “ZAVŘÍT”;
}

Tento kód vymění hamburger za jiný obrázek nebo ikonu

.elementor-menu-toggle i{
max-width:40px;
content: url(https://www.ziveweby.cz/wp-content/uploads/2018/12/favico.png);
}

Tento kód vymění ikonu “X” za jiný obrázek nebo ikonu

.elementor-menu-toggle.elementor-active i {
max-width:40px;
content: url(https://www.ziveweby.cz/wp-content/uploads/2018/12/favico.png);
}

Kam kódy vložit? Musíte mít Elementor Pro a kód vložte přímo v Elementoru hlavičky v nastavení prvku NavMenu – Pokročilé – Custom CSS.

Malý tip na závěr

Pokud chcete hamburger menu použít i v desktopové verzi a nechcete, aby vám rozbalovací menu zvětšovalo hlavičku, případně nezabíralo celou šířku plochy, použijte tento kód na stejné místo.

.elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active+.elementor-nav-menu__container {
    width: auto !important;
    left: 0px !important;
}