How to add hamburger menu in bootstrap

Question

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    x000D   x000D   navbar  x000D   navbar-inverse   x000D    border-radius  0  x000D    border  none  x000D    margin-bottom  0  x000D    min-height  80px  x000D    x000D   x000D   nav li   x000D    display  inline  x000D    color  white  x000D    x000D   x000D   navbar-inverse  navbar-nav gt li gt a   x000D    color   ffffff  x000D    font-family  Lato  x000D    font-size  1 7em  x000D    font-weight  300  x000D    padding  30px 25px 33px 25px  x000D    x000D   x000D   navbar-inverse  navbar-nav li a hover   x000D    background-color   444444  x000D    transition  0 7s all linear  x000D    height  100   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 2 1 3 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap min css  gt  x000D   x000D   lt nav class  navbar navbar-inverse navbar-static-top  role  navigation  gt  x000D     lt div class  container  gt  x000D       lt ul class  nav navbar-nav  gt  x000D         lt li gt  lt a href  index php  gt Home lt  a gt  lt  li gt  x000D         lt li gt  lt a href  about php  gt About lt  a gt  lt  li gt  x000D         lt li gt  lt a href   portfolio  gt Portfolio lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt Blog lt  a gt  lt  li gt  x000D         lt li gt  lt a href  contact php  gt Contact lt  a gt  lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Accepted Answer

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

Codepen

_x000D_

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

_x000D_

User · Answer

To create icon you can use Glyphicon in Bootstrap    lt a href     class  btn btn-info btn-sm  gt       lt span class  glyphicon glyphicon-menu-hamburger  gt  lt  span gt   lt  a gt    And then control size of icon in css    glyphicon-menu-hamburger     font-size  npx

User · Answer

CSS only  no icon sets  Codepen   x000D   x000D   nav-link  navBars   x000D  margin-top  -3px  x000D  padding  8px 15px 3px  x000D  border  1px solid rgba 0 0 0  125   x000D  border-radius   25rem  x000D    x000D   x000D   nav-link  navBars input   x000D  display  none  x000D    x000D   x000D   nav-link  navBars span   x000D  position  relative  x000D  z-index  1  x000D  display  block  x000D  margin-bottom  6px  x000D  width  24px  x000D  height  2px  x000D  background-color  rgba 125  125  126  1   x000D  border-radius   25rem  x000D    x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  rel  stylesheet   gt  x000D   lt nav class  navbar navbar-expand-lg navbar-light bg-light  gt  x000D      lt  --  lt a class  navbar-brand  href     gt  x000D         lt img src  https   getbootstrap com docs 4 0 assets brand bootstrap-solid svg  width  30  height  30  class  d-inline-block align-top  alt    gt  x000D        Bootstrap x000D         lt  a gt  -- gt  x000D      lt  -- https   stackoverflow com questions 26317679 -- gt  x000D      lt a class  nav-link  href     gt  x000D         lt div id  navBars  gt  x000D            lt input type  checkbox    gt  lt span gt  lt  span gt  x000D            lt span gt  lt  span gt  x000D            lt span gt  lt  span gt  x000D         lt  div gt  x000D      lt  a gt  x000D      lt  --  26317679 -- gt  x000D      lt div class  collapse navbar-collapse  id  navbarNav  gt  x000D         lt ul class  navbar-nav  gt  x000D            lt li class  nav-item active  gt  lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  lt  li gt  x000D            lt li class  nav-item  gt  lt a class  nav-link  href     gt Features lt  a gt  lt  li gt  x000D            lt li class  nav-item  gt  lt a class  nav-link  href     gt Pricing lt  a gt  lt  li gt  x000D            lt li class  nav-item  gt  lt a class  nav-link disabled  href     gt Disabled lt  a gt  lt  li gt  x000D         lt  ul gt  x000D      lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

[html] How to add hamburger menu in bootstrap

Examples related to html

Examples related to twitter-bootstrap

Examples related to navigation

Examples related to hamburger-menu