How to make a hamburger menu button on mobile web? - html

Question

I am trying to create a hamburger menu button on a navbar inside a mobile web. This is my first time to build mobile web. And this code only show a huge square kind button instead of a nice hamburger menu. Please help.
<nav class="navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand ui-link" onclick="window.location.href='/'"href</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#popup">
<span class="text">Menu</span>
<span class="icon-bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</button>
</div>
</div>
</nav>

Answer 1

I'm not quite sure what you're trying to accomplish, but one thing you are missing in your "hamburger menu" is a color for the "bars".
So if you just add for example a background-color to your icon-bar elements it will show the hamburger menu.
.icon-bar {
background-color: black;
}
JSFiddle

Answer 2

You can just embed this code where you want a hamburger menu and it will automatically display the menu:
<svg>
<path fill="black" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>

Answer 3

div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
<p>A humburger icon:</p>
<div></div>
<div></div>
<div></div>

Answer 4

The problem in your code is that you used a span instead of a div, which has made all the difference, because span is an inline element and div is a block level element.
Using divs with some CSS as mentioned in this answer can help, but there are many ways through it.
You can use SVG, if you want a simple icon. It has been mentioned in this answer, but I'll still quote it:
<svg>
<path fill="black" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>
You can also create an animated icon, like this:
function myFunction(x) {
x.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
Hope I could help