Replace Hamburger lines with word menu in Genesis mobile menu
Updated On May 27, 2017 October 5, 2014 -Written ByHTML5 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.
Any idea how to add “Menu” and then have the hamburger lines below it?
Thanks! That was very helpful. Have a good day.