Replace Hamburger lines with word menu in Genesis mobile menu

HTML5 Genesis Themes show hamburger lines (graphic image, if you say so) for the mobile menu. While viewing website on mobile, visitor taps on this hamburger icon to expand and see menu items. Do you want to replace this lines image with specific word like menu, navigation and so on?

Make small change in style.css file

1. Look for following code in style.css file of your Genesis Theme (using Generate Theme for this).

[cc]
/* Responsive Menu
——————————————— */

.responsive-menu-icon {
cursor: pointer;
display: none;
}

.responsive-menu-icon::before {
content: “\f333”;
display: block;
font: normal 20px/1 ‘dashicons’;
margin: 0 auto;
text-align: center;
}

.nav-primary .responsive-menu-icon::before {
padding: 10px;
}
[/cc]

2. Replace \f333 with menu and save changes.

3. Now word menu will appear. You can customize it further by adding font size, font color css elements.