title: Hamburger menu not working properly
body: <p>I am working on my personal website and couldn't get hamburger working.</p>
  
  <p>Right in mobile, it is just all menu options in one row, not in different rows like classic hamburger look.</p>
  
  <p>Initially, hamburger didn't work at all but i added <code>/*******HAMBURGER FIX*********/</code> part from a website and now it is working but as i said, not correctly.</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-css lang-css prettyprint-override"><code>html {
    height: 100%;
  }
  
  body {
    background-image: url('background.png');
    background-size: cover;
    background-position: center;
  }
  
  #content {
    text-align: center;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
  }
  
  #const {
    color: #FFFFF5;
    font-weight: bold;
    font-size: 5em;
  }
  
  hr {
    width: 1000px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2)
  }
  
  .social i {
    padding-top: 100%;
    font-size: 3em;
    color: #cccccc;
  }
  
  .sections {
    padding-top: 5%;
  }
  
  .sections .section-option i {
    padding-top: 15px;
    color: #999999;
    font-size: 13em;
  }
  
  .logo {
    font-size: 1.2em;
  }
  
  
  /*******HAMBURGER FIX*********/
  
  @media (min-width: 991px) and (max-width: 768px) {
    .navbar-collapse.collapse {
      display: none !important;
    }
    .navbar-collapse.collapse.in {
      display: block !important;
    }
    .navbar-header .collapse,
    .navbar-toggle {
      display: block !important;
    }
    .navbar-header {
      float: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    
    &lt;!-- jquery CDN --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"&gt;&lt;/script&gt;
  
    &lt;!-- Latest compiled and minified CSS --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
    &lt;!-- Optional theme --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
    &lt;!-- Latest compiled and minified JavaScript --&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
    &lt;!-- font awesome CDN --&gt;
    &lt;script src="https://use.fontawesome.com/7627dbb339.js"&gt;&lt;/script&gt;
    &lt;title&gt;Halil Süheyb Becerek&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;!-- start of the navbar --&gt;
    &lt;nav class="navbar navbar-inverse"&gt;
      &lt;div class="container"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;&lt;i class="fa fa-code logo" aria-hidden="true"&gt;&lt;/i&gt;    Halil Süheyb Becerek&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-home" aria-hidden="true"&gt;&lt;/i&gt;    Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt;    Blog&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-github" aria-hidden="true"&gt;&lt;/i&gt;    Projects&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-briefcase" aria-hidden="true"&gt;&lt;/i&gt;    Work /    &lt;i class="fa fa-university" aria-hidden="true"&gt;&lt;/i&gt; Education History&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-user-circle-o" aria-hidden="true"&gt;&lt;/i&gt;    About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-envelope-o" aria-hidden="true"&gt;&lt;/i&gt;    Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- /.navbar-collapse --&gt;
        &lt;/div&gt;
        &lt;!-- /.container-fluid --&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;!-- end of the navbar --&gt;
  
    &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div id="content"&gt;
        &lt;div class="row"&gt;
          &lt;!-- &lt;div id="const" class="col-xs-12"&gt;
                          SITE UNDER CONSTRUCTION
      
                      &lt;div class="progress"&gt;
                     &lt;div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"&gt;
                      10%
                     &lt;/div&gt;
                     &lt;/div&gt;
      
      
                      &lt;/div&gt; --&gt;
          &lt;div class="sections"&gt;
            &lt;div class="col-lg-6 col-xs-12 section-option"&gt;&lt;a href=""&gt;&lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="col-lg-6 col-xs-12 section-option"&gt;&lt;a href=""&gt;&lt;i class="fa fa-university" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="col-lg-6 col-xs-12 section-option"&gt;&lt;a href=""&gt;&lt;i class="fa fa-user-circle-o" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="col-lg-6 col-xs-12 section-option"&gt;&lt;a href=""&gt;&lt;i class="fa fa-envelope-o" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="social"&gt;
            &lt;div class="col-xs-2"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-facebook-official" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="col-xs-2"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-twitter-square" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="col-xs-2"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-instagram" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="col-xs-2"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-youtube-square" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="col-xs-2"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-linkedin-square" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="col-xs-2"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-github-square" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>