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

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!

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

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

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.

Related

Bootstrap Navbar

I have a Bootstrap Navbar, that I am trying to have set as simply a hamburger for the entire window except when it stretches out to about 700px (when it can show all the nabber drop downs without stacking). This works until about 400px, at which point the 'home' button and 'hamburger' seem to shift closer to the middle of the nabber, and dont drop down properly. I have tried using a pull-left and pull-right class for each but that leaves them where they are. My nav bar is as such:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Home</a>
</div>
with the following CSS:
#media (max-width: 1200px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
Try to remove the container inside the nav element. see the bootstrap examples there is a container where the two iems are closer to the middle...

Bootstrap navbar-brand logo - portrait image has been cut off?

Following this page to use image logo instead of text for navbar brand, I came across this problem that the portrait logo has been cut off by any content/ text/ image/ carousal that comes after it.
How can I fix it?
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x200&text=Logo" alt="">
</a>
</div>
Result:
Add a max-height to the img.
max-height: 100%;
height: 100%;
width: auto;
Try adding a z-index to your nav bar like so in your CSS file as it looks like your foreground image is overlapping it
.navbar-header {
z-index: 100;
}

This button does not toggle back in

I am working on this site: http://www.u401769.gluweb.nl/
I have a problem with the toggle menu when you view the site on mobile size. When you toggle it out and back in the cart button keeps being visible.
This is the code for the content that is toggled. The button in the end is the button that does not toggle back in.
<div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true">
<div class="menu-hoofdmenu-container">
<ul class="social_media">
<li><img src="wp-content/themes/fairphone/img/social_icon_01.png">
</li>
<li>
<img src="wp-content/themes/fairphone/img/social_icon_02.png">
</li>
<li>
<img src="wp-content/themes/fairphone/img/social_icon_03.png">
</li>
<li>
<img src="wp-content/themes/fairphone/img/social_icon_04.png">
</li>
</ul>
<button type="button" class="shopping-cart">
</button>
</div>
and the button that toggles the menu:
<button type="button" class="navbar-toggle menu-toggle" aria-controls="primary-menu" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
I hope someone is able to help me. Thank you in advance.
I fixed this with css as following:
first you need to add display:none to the cart button, so its style will be like this :
.shopping-cart {
background-image: url('img/shop_icon.png');
background-repeat: no-repeat;
background-position: center;
margin: 15px;
float: right;
background-color: #00a4de;
border: none;
box-shadow: none;
padding: 12px 25px;
display: none;
}
then we will add style to make it visible when the menu is toggled down :
.main-navigation.toggled .shopping-cart {
display: block;
}
and finally we will add the following style to yours to make the button always visible when the width of screen is bigger than 769px :
#media screen and (min-width: 768px) {
.shopping-cart{
display:block;
}
}

Twitter Bootstrap Icon-bar not Displaying

Only 2 of my three icon-bars show when I resize my browser. Previous answers show that people have not put their icon-bars in the right nav tag, however I have done this and it is all correct. My website is viewable here, but here is my code for header.php too:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="logo">
<a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a>
</div>
</div>
I found this rule on your page:
span {
color: #fff;
display: block;
font-family: centrale_sans_regularregular,helvetica;
font-size: 30px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
z-index: 80;
}
from bootstrap.
The position absolute is breaking it; override position to be static or unset for span.icon-bar and it'll fix it.
You overide the bootstrap styles with your own stylesheet.
You must remove or specify your code (http://www.franhaines.co.uk/style.css) like so:
span:not(.icon-bar) {
color: #fff;
font-family: centrale_sans_regularregular, helvetica;
font-size: 30px;
z-index: 80;
position: absolute;
display: block;
top: 50%;
text-align: center;
width: 100%;
}
Same Code Works Fine For Me.
<link href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="logo">
<a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a>
</div>
</div>
Demo Here
Note: Bootstrap CSS from Here

Adding clickable help icons to navbar menu items in bootstrap navbar

I'm trying to add clickable and hoverable little help icons, which floats to the right side of the corresponding navbar menu item. My problem is that bootstrap applies its styles in a way that it doesn't seem to be a quick easy task.
My icon would be something like this (using FontAwesome):
<span class="navmenu-help-icon"><i class="fa fa-question-circle"></i></span>
My current LESS code for the icon is (based on the styling of the a element):
.navbar-nav > li > .navmenu-help-icon {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
cursor: pointer;
color: white;
background-color: lighten(#navbar-inverse-bg, 20%);
}
I can't wrap the link and my button in a div because bootstrap exepcts the a element as a first level child of its li. If I place my icon after the a, I couldn't figure out how to align them horizontally, it always goes under the link. I guess because the a element's display: block style.
I'm targetting only modern browsers (full CSS3 support expected).
How could I do this?
I'm not sure if this is what you're looking for, but why not simply put the icon inside the a tag, like <li>Help <i class="fa fa-question-circle"></i></li>?
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Help <i class="fa fa-question-circle"></i></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Update based on comments (same row icon and text on mobile layout)
To show an icon with another link next to one of the navigation items both in desktop and mobile views, I've added the class nav-iconitem to the these li's. This changes the a tags from display: block to display: inline-block. The li should contain a separate a.nav-iconitem__text tag for the text and a a.nav-iconitem__icon for the icon. The classes nav-iconitem__text and .nav-iconitem__icon are used to change the distance between the text and the icon.
#import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
.nav > li.nav-iconitem > a {
display: inline-block;
}
.nav > li.nav-iconitem > a.nav-iconitem__text {
padding-right: 0;
}
.nav > li.nav-iconitem > a.nav-iconitem__icon {
padding-left: 0;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-iconitem">Help
<i class="fa fa-question-circle"></i></li>
<li>Regular
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Update based on comments (float icon to the right)
To make the icon float to the right, the easiest way might be to set position: relative to the .nav-iconitem and position: absolute, top: 0 and right: 0 to the .nav-iconitem__icon. As the icon might overlap the .nav-iconitem__text you unfortunately need to add a fixed sized padding-right to the .nav-iconitem.
It might be possible to achieve this with a display: table, but as tables have the tendency to grow you might need a fixed width somewhere anyway. I would prefer having a fixed width on an icon instead of a container containing text.
#import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
.nav > li.nav-iconitem {
display: relative;
padding-right: 30px;
}
.nav > li.nav-iconitem > a.nav-iconitem__text {
padding-right: 0;
}
.nav > li.nav-iconitem > a.nav-iconitem__icon {
position: absolute;
top: 0;
right: 0;
padding-left: 0;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-iconitem">Help
<i class="fa fa-question-circle"></i></li>
<li>Regular
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
My final solution was to use the table-cell display mode inside the LI-s where an icon should be displayed. I've allowed myself to place the icon on the left to make things a bit easier.
Here is the LESS source which handles submenus and collapsed mode as well. Note that I use Jasny Bootstrap's Offcanvas navbar, so some part refers to that.
.navbar {
li.with-icon {
& > a {
display: table-cell;
padding-left: 0;
}
& > .navmenu-help-icon {
display: table-cell;
padding: #nav-link-padding;
padding-right: 8px;
line-height: 20px;
cursor: pointer;
color: white;
font-size: 1em;
//background-color: lighten(#navbar-inverse-bg, 20%);
}
}
.dropdown-menu {
li.with-icon {
& > .navmenu-help-icon {
display: table-cell;
padding: 3px 10px;
}
& > a {
width: 99%; // force spanning till right border
padding-left: 0;
}
}
}
.offcanvas.canvas-slid {
li.with-icon {
& > .navmenu-help-icon {
display: table-cell;
padding: #nav-link-padding;
}
& > a {
width: 99%; // force spanning till right border
padding-left: 0;
}
}
}
}
And the HTML markup looks like this:
<li class="with-icon">
<span class="help-icon navmenu-help-icon" title="Some description"><i class="fa fa-question-circle"></i></span>
The link
</li>