How To Add "Menu" next to hamburger menu on smart phone?

Airi
#1

Instead of just the little hamburger menu, I’d like to have the word MENU just to the right on a smart device. I looked in Customize but could not find how to add that. Thank you. :slight_smile:

stevenweiler.com

#2

Hello there,

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

      if( $('.mobile-menu-toggle').length ) {
        $('.mobile-menu-toggle').append('<span class="menu-text">Menu</span>');
      }

    });
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .mobile-menu-toggle {
      border-radius: 0;
      padding-right: 50px;
      padding: 15px 40px 15px 0;
      margin-right: 40px;
    }

    .mobile-menu-toggle .mobile-menu-toggle_lines {
      width: 40px;
    }

    .mobile-menu-toggle .menu-text {
      position: absolute;
      top: 0;
      left: 43px;
      font-size: 22px;
      text-align: right;
    }

Regards,
Kharis

#3

Kharis thanks. Not sure this works like we want. First, how can I change the color? Also, “MENU” seems to stick out to the right, and the rest of the site (under) is slid over to the left (isn’t full screen because the way “MENU” is formatted. Maybe you can look at it and see what I mean. Thank you.

Steve

stevenweiler.com