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.

mobile-menu-button-genesis-theme

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

2 Comments

  1. Derek Alvarez on February 26, 2015 at 11:11 pm

    Any idea how to add “Menu” and then have the hamburger lines below it?

  2. Sookie on September 10, 2015 at 5:03 pm

    Thanks! That was very helpful. Have a good day.

Leave a Comment