Cómo agregar el menú de hamburguesas en bootstrap

Necesito ayuda con el programa de arranque. Quiero que se active mediante un icono de hamburguesa en el móvil.

Aquí está en codepen:http://codepen.io/sadman/pen/hfGwv (enlace no válido)

.navbar,
.navbar-inverse {
  border-radius: 0;
  border: none;
  margin-bottom: 0;
  min-height: 80px;
}

.nav li {
  display: inline;
  color: white;
}

.navbar-inverse .navbar-nav>li>a {
  color: #ffffff;
  font-family: Lato;
  font-size: 1.7em;
  font-weight: 300;
  padding: 30px 25px 33px 25px;
}

.navbar-inverse .navbar-nav li a:hover {
  background-color: #444444;
  transition: 0.7s all linear;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
  </div>
</nav>

Respuestas a la pregunta(2)

Su respuesta a la pregunta