Menu
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
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!
592
ml-auto class in Bootstrap can be used to align navbar items to the right. The . ml-auto class automatically aligns elements to the right.
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
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
107
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;
}
Another just css solution:
.navbar-toggle:before {
content:"Menu";
left:-50px;
top:4px;
position:absolute;
width:50px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
