Change the mobile menu icon to the word "Menu"

I have a client that isn’t a fan of the 3 line mobile menu button.
Is there a way to change that to text to another icon?


Hello there,

To alter the default mobile menu button style with a plain text, follow the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

jQuery(function($) {



  1. Update
  2. Add the below CSS code into Appearance > Customize > Additional CSS in your site dashboard to remove the 3 lines and style the text.

.btn-menu:before {
  content: '';

.btn-menu {
  width: auto;
  text-transform: uppercase;

If you want to alter it with an image, you can use the below custom CSS code:

.btn-menu:before {
  content: '';

.btn-menu {
  background-image: url('');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;

Replace with the valid URL to your image. You’ll need to upload it first to the media library from Dashboard > Media > Add New.

I hope this reply helps.