Add Text Hint to Bootstrap Navbar Toggle Button on Mobile-View

Question

Some tests have shown that the "hamburger" button for collapsable menus on mobile devices are mysteries to users and I would like to add the word "Menu" next to my Bootstrap menu button as seen in mobile-view.

For further reading check out this article: 'The Hamburger is Bad for You': http://mor10.com/hamburger-bad/

Here is the basic Bootstrap Code:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <!-- Represents navbar collapsed menu on smaller screens -->
  <span class="sr-only">Toggle navigation</span>
    <!-- 3 horizontal lines on small screen nav button -->
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

So, I'd like to add the word "MENU" next to the icon on mobile. I made a mockup of what I'm talking about but I don't have a high enough reputation on SO to post it.

Check it out here: https://imgur.com/M7hGS7F

• FYI this is a mockup, the actual Bootstrap page does not contain the MENU text or else I'd just look at the source.

If you could provide info on how to include is as (A) simply text next to the button & (B) as part of the button so it could be clicked that'd be awesome. Thanks in advance for your help with this solution!

Answer 1

Another just css solution:

.navbar-toggle:before {
    content:"Menu";
    left:-50px;
    top:4px;
    position:absolute;
    width:50px;
}