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

前端未结

关注

 4  493

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

相关标签:

4条回答

北荒

2021-02-04 11:07

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;
}

0 讨论(0)

梦如初夏

2021-02-04 11:08
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">
    
    <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
0 讨论(0)
发布评论:

提交评论
- 加载中...

旧巷少年郎

2021-02-04 11:12

Another just css solution:

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

0 讨论(0)

走了就别回头了

2021-02-04 11:15

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.

0 讨论(0)