JS
/* Step 2
Edit style.css.
Change */
/* Responsive Menu
--------------------------------------------- */
.responsive-menu-icon {
background-color: #f2f2f2;
cursor: pointer;
display: none;
}
.responsive-menu-icon::before {
content: "\f333";
display: block;
font: normal 20px/1 'dashicons';
margin: 0 auto;
padding: 10px;
text-align: center;
}
/* to */
/* Responsive Menu
--------------------------------------------- */
.responsive-menu-icon {
background-color: #f2f2f2;
cursor: pointer;
display: none;
text-align: center;
margin-top: 10px;
margin-bottom: 15px;
}
.responsive-menu-icon::before {
content: "\f333";
display: inline-block;
font: normal 20px/1 'dashicons';
padding: 10px;
}
.menu-text {
vertical-align: top;
display: inline-block;
margin-top: 7px;
font-size: 15px;
}
// Before: hamburger icon
// After: hambuger icon followed by word "MENU"
// Step 1
// Edit js/responsive-menu.js.
// Change
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');
// to
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"><span class="menu-text">MENU</span></div>');