Adding the word ‘Menu’ next to the Hamburger icon in Altitude Pro

In the members-only forum, a user asked:

I’m using altitude pro, but I suspect this would apply to other themes as well. I’ve looked online and through the tutorials and understand how to replace the dashicon. However, adding the word Menu next to the dashicon is not working well in my tests

...I’m trying to get the hamburger aligned with the text Menu similar to this: https://css-tricks.com/three-line-menu-navicon/

I also want to style the font face/font size of the text Menu.

Here's one way in which 'Menu' text can be added to the right of hamburger menu icon in Altitude Pro.

This method can also be seen in use in my Genesis Starter Child Theme.

In js/global.js change

$( '.nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu' ).addClass( 'responsive-menu' ).before('<div class="responsive-menu-icon"></div>');

view raw gistfile1.js hosted with by GitHub

to