Frequently Asked Question

By default the WordPress uses the "Hamburger" Icon to specify a Mobile Menu, this might not be intuitive to members who are not used to this icon, so I found a CSS configuration to change this to also say "Menu"

This is what it looks like by default, clicking this icon shows the menu.

This is what I changed it to

I did have to change the CSS for it to match my area's color theme, but that should be pretty straightforward. To make this change add the following CSS to your Divi Custom CSS by following these steps.

1) On the WordPress Menu click on Divi

2) Scroll Down to the

bottom of the Theme Options

3)

Paste the following into this CSS Field

4) Change the colors of "background-color" "color" in both sections to the hex value of your theme's colors.

CSS Code to add

/*------------------------------------------------*/
/*---------[GQ - MOBILE MENU BUTTON 1]------------*/
/*------------------------------------------------*/

.mobile_menu_bar:before {
background-color: #3e4555;
padding: 2px 0px 2px 2px;
top: 9px;
color: #fff!important;}
.mobile_menu_bar::after {
font-family: Arial;
content: "MENU";
position: relative;
padding: 10px 20px 10px 5px;
background-color: #3e4555;
color: #FFFFFF!important;
cursor: pointer;}
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";}

Reference

https://quiroz.co/turn-your-mobile-menu-hamburger-icon-into-a-menu-button-with-text/