I have this as my menu bar for the site when viewed on tablet:
The menu icon on the rig
The solution used by Twitter Bootstrap is using spans to construct the Hamburger:
The corresponding CSS is:
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: #cccccc;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color:#000000;
border-radius: 1px;
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px;
}