Webové zákusky

Menu – text místo ikony

19. 8. 2022

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

Zavřené menu

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 **/
Otevřené menu

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

image 5

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 **/

Zdroje

Další články

Jak přidat fonty do DIVI

V článku o lokálních fontech v DIVI jsem popisovala, jak je možné přidat do DIVI vlastní font a co dělat, pokud DIVI daný formát fontu nepodporuje (tedy jiný formát než TFF nebo OTF). Někdy je...