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

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!

nozzleman

I guess it would be the best to use fontawesome.

simply include the references to fontawesome (see http://fortawesome.github.io/Font-Awesome/get-started/) and then use the bars icon (http://fortawesome.github.io/Font-Awesome/icon/bars/)

So your code would look sth. like that:

<head>
   [...]
   <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
   [...]
</head>
<body>

[...]

<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>
    <i class="fa fa-bars" aria-hidden="true"></i> Menu
</button>

If the Bars icon should be bigger, simply add fa-lg or any other class which can be found at http://fortawesome.github.io/Font-Awesome/examples/ to the icon

Another just css solution:

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

HTML

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="button-label">Menu</span>
    <div class="button-bars">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>
</button>

CSS

.navbar-toggle .button-label {
    display: inline-block;
    float: left;
    font-weight: bold;
    line-height: 14px;
    padding-right: 10px;
}
.button-bars {
    display: inline-block;
    float: left;
}

I had the same problem, but didn't feel like adding fontawesome.

Here is my solution (HTML and LESS):

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="button-label">Meny</span>
    <div class="button-hamburger">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
    </div>
</button>

LESS:

button {

    .button-label {
        display: table-cell;
        vertical-align: middle;
        font-weight: 700;
        padding-right: 3px;
    }

    .button-hamburger {
        display: table-cell;
        padding: 8px;
        border: 1px solid #333;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;

        .icon-bar {
            background: #333;
        }
    }
}
.navbar-toggle {
    border: none;
    padding: 0;
}

WARNING: I'v only tested this in lastest Chrome and IE 11. I do not have anything else set up atm.

来源：https://stackoverflow.com/questions/23744914/add-text-hint-to-bootstrap-navbar-toggle-button-on-mobile-view

标签

html

twitter-bootstrap

jquery-mobile

mobile

user-experience