Občas se hodí pro menu zobrazit text místo ikony hamburgeru (např. “MENU”, nebo “NAVIGACE”), který jasně řekne, kde se dá menu najít.
Pokud máme k dispozici menu v DIVI (nehledě na to, jestli je to klasické menu nebo vlastní ze šablony), můžeme ho hezky a jednoduše upravit – buď zobrazit ikonu a text spolu, nebo nechat pouze text. Stačí přidat zvolené CSS do nastavení šablony (aby fungovalo na všech stránkách).
Ikona + text
Pokud chceme zobrazit ikonu hamburgeru a text (např. “MENU”), slouží k tomu následující kousek CSS. Text, barvu, velikost fontu si račte změnit dle potřeby:
/** Menu - replace hamburger icon by text BEGIN **/
/* set 'menu' text */
.mobile_menu_bar:after {
content: "MENU";
color: white;
cursor: pointer;
font-size: 15px;
vertical-align: text-top;
}
/** Menu - replace hamburger icon by text END **/
Pokud chceme změnit text, když je menu otevřené (např. na “ZAVŘÍT”), přidáte ještě jeden kousek CSS:
/* optional: to change 'menu' text to 'close' for opened menu */
.opened .mobile_menu_bar:after {
content: "CLOSE";
}Pouze text
Pokud chceme zobrazit pouze text (např, “MENU”) bez ikony, slouží k tomu tento kousek CSS (a stejně bude fungovat i varianta pro zavření menu, zmíněná výše). Opět platí – text, barvu, velikost fontu si račte změnit dle potřeby:
/** Menu - replace hamburger icon by text BEGIN **/
/* hide hamburger icon */
.mobile_menu_bar:before {
opacity: 0;
}
/* set 'menu' text */
.mobile_menu_bar:after {
content: "MENU";
position: relative;
margin-left: -20px;
color: #000!important;
cursor: pointer;
font-size: 15px;
vertical-align: text-top;
}
/* optional: to change 'menu' text to 'close' for opened menu */
.opened .mobile_menu_bar:after {
content: "ZAVŘÍT";
}
/** Menu - replace hamburger icon by text END **/