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?

Thanks
Syx

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($) {

  $('.btn-menu').text('Menu');

});

  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('http://yoursite.com/path/to/mobile-menu.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

Replace http://yoursite.com/path/to/mobile-menu.png 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.

Regards,
Kharis