Bootstrap Mobile Menu

  <!-- in html -->
  
    <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"></span>
            <i class="fa fa-navicon"></i>
        </button>
    </div>
  <nav class="main_menu collapse navbar-collapse" id="navbar">
      <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT US</a></li>
          <li><a href="#">ADMISSION</a></li>
          <li><a href="#">CAMPUS LIFE</a></li>
          <li><a href="#">PAGES</a></li>
      </ul>
  </nav>
  
  *********************************************
  *********************************************

/* in responsive css */

  @media only screen and (min-width: 0px) and (max-width: 767px) {
    .navbar-toggle {
      color: #4CAF50;
      font-size: 20px;
      display: block;
      padding: 0;
      margin: 0 15px 0 0;
      line-height: 61px;
    }
}