title: Leftbar Hamburguer Menu Bootstrap
body: <p>In my application, the left bar hides when you open the page in a mobile resolution, but I can't do the "hamburguer button" work.</p>
  
  <p>Every solution that i find, did not work.</p>
  
  <p>Here is my HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
                      &lt;div class="container"&gt;
                          &lt;div class="navbar-header"&gt;
                              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#leftSidebar"&gt;
                                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;a class="navbar-brand" href="#"&gt;Project Name&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row row-offcanvas row-offcanvas-left row "&gt;
  
                  &lt;/div&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row row-offcanvas row-offcanvas-left"&gt;
                          &lt;div class="col-sm-3 col-md-2 sidebar opficio dashMenuFont sidebar-offcanvas" id="leftSidebar" role="navigation"&gt;
                              &lt;div class="nav-img"&gt;
                                  &lt;img src="img/userDefaultImage.png"&gt;
                                  &lt;p class="opficio-bold userName"&gt;&lt;?php echo strtoupper($_SESSION ['nickUser']) ?&gt;&lt;/p&gt;
                                  &lt;hr&gt;
                              &lt;/div&gt;
                              &lt;div class="dash-menu"&gt;
                                  &lt;ul class="nav"&gt;
                                      &lt;li&gt;&lt;a href="dashboard.php?p=home"&gt;&lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt; Início&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="dashboard.php?p=search"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt; Buscar&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="dashboard.php?p=watched"&gt;&lt;span class="glyphicon glyphicon-ok-circle"&gt;&lt;/span&gt; Assistido&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-comment"&gt;&lt;/span&gt; Bate-papo&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-cog"&gt;&lt;/span&gt; Config.&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                              &lt;hr&gt;
                              &lt;div class="nav-logo-bot"&gt;
                                  &lt;img src="img/nav-logo.png"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"&gt;
                          &lt;?php
                          $link = filter_input(INPUT_GET, 'p');
                          include $link . ".php";
                          ?&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As it is, the left bar hide and the hamburger button show, but the button didn't work and a top bar stay in the top of my page, when i removed it, the hamburguer button had disapears</p>
  
  <p>Thanks.</p>
  
  <p>@edit
  how the application is:
  <a href="https://i.stack.imgur.com/9GRoF.png" rel="nofollow noreferrer">Tela web desktop</a></p>
  
  <p><a href="https://i.stack.imgur.com/vLuyh.png" rel="nofollow noreferrer">tela web mobile</a></p>