Changing the sandwich menu to label

This tutorial covers the change of sandwich menu icon to word MENU using CSS.

  1. Add the sandwich menu to your Header;
  2. In a page using the header and footer layout, set the header and open the page in a new tab.

Set the Element ID

After adding the Sandwich menu element, set a name to the Element ID.

Setup the CSS

Open your Visual Composer – Settings – CSS, HTML and Javascript tab. At the Custom CSS field, add the code below.

Change the element_ID to your own and copy/paste to the Custom CSS field.

/* Hide the sandwich menu and show the word Menu instead.
 * Add necessary styling to text.
 */

#element_ID .vce-sandwich-menu-open-button-inner {
    position: relative;
    width: auto;
  height: auto;
  font-size: 20px;
}

#element_ID .vce-sandwich-menu-open-button-inner::after {
    content: 'MENU';
    position: relative;
}

#element_ID .vce-sandwich-menu-open-button-inner svg {
    display: none;
}

After you copy and paste the code, save it and reload the page to show the menu changes.

Extra

To change the font family, size, color, add the proper CSS code in the second CSS line, like this:

#element_ID  .vce-sandwich-menu-open-button-inner::after {
content: 'MENU';
position: relative;
font-family: ‘Lato’, sans-serif;
color: turquoise;
}