Add a Label to Mobile/Responsive Menu [#2173805]

Hello,

I have received some feedback from users of my site, saying that the mobile menu is confusing and it not easy to find. It is front-and-center, but I think not everyone understands that the little button will expand the menu. How can I add a label "CLICK FOR MENU" in the empty space to the left of the menu button on the responsive version of the menu?

Thanks!

Comments

Comment #1

bdanin CreditAttribution: bdanin commented 15 January 2014 at 14:28

One quick way would be using a pseudo element in CSS, for example:
.navbar-toggle:after { content: "Click for Menu"; }

The other way (which is probably better) is to copy the page.tpl.php into your subtheme directory and modify that.
Use this file:
bootstrap/theme/system/page.tpl.php

Copy it into a "templates" directory in your subtheme, then edit it and add:

<p><?php print t('Click for Menu'); ?></p>

Before button (line 90)

Comment #2

hockey2112 CreditAttribution: hockey2112 commented 15 January 2014 at 15:13

Thanks, bdanin. Your template method worked great! Here's my code and CSS, in case it might help anyone else:

          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
         	<p class="menutitle"><?php print t('Menu'); ?></p>
            <div><span class="icon-bar"></span>
            	 <span class="icon-bar"></span>
            	 <span class="icon-bar"></span>
            </div>
          </a>

.menutitle {
    color: #FFFFFF;
    display: block;
    float: left;
    margin: 0 10px 0 0;
    text-transform: uppercase;
}
.btn.btn-navbar > div {
    float: right;
    margin-top: 3px;
}

By adding the menu title where I did, it becomes part of the clickable button, making it completely obvious what that button is for.