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

Answer 1

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

Here is my solution (HTML and LESS):

    Meny
    

       
       
       
    

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.