How To Add Hamburger Menu In Bootstrap

I need some help with bootstrap nav. I want it to be toggled via a hamburger icon on mobile. Here it is on codepen: http://codepen.io/sadman/pen/hfGwv (link invalid)

Solution 1:

All you have to do is read the code on getbootstrap.com:

Codepen

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><navclass="navbar navbar-inverse navbar-static-top"role="navigation"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button></div><!-- Collect the nav links, forms, and other content for toggling --><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ulclass="nav navbar-nav"><li><ahref="index.php">Home</a></li><li><ahref="about.php">About</a></li><li><ahref="#portfolio">Portfolio</a></li><li><ahref="#">Blog</a></li><li><ahref="contact.php">Contact</a></li></ul></div></div></nav>

Solution 2:

To create icon you can use Glyphicon in Bootstrap:

<ahref="#"class="btn btn-info btn-sm"><spanclass="glyphicon glyphicon-menu-hamburger"></span></a>

And then control size of icon in css:

.glyphicon-menu-hamburger {
  font-size: npx;
}

Solution 3:

CSS only (no icon sets) Codepen

.nav-link#navBars {
margin-top: -3px;
padding: 8px15px3px;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}

.nav-link#navBarsinput {
display: none;
}

.nav-link#navBarsspan {
position: relative;
z-index: 1;
display: block;
margin-bottom: 6px;
width: 24px;
height: 2px;
background-color: rgba(125, 125, 126, 1);
border-radius: .25rem;
}

<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /><navclass="navbar navbar-expand-lg navbar-light bg-light"><!-- <a class="navbar-brand" href="#">
      <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
      Bootstrap
      </a> --><!-- https://stackoverflow.com/questions/26317679 --><aclass="nav-link"href="#"><divid="navBars"><inputtype="checkbox" /><span></span><span></span><span></span></div></a><!-- /26317679 --><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Features</a></li><liclass="nav-item"><aclass="nav-link"href="#">Pricing</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul></div></nav>