title: Navbar collapse is not working in Bootstrap
body: <p>@Bhanu pratap solved the problem. check it out at the end of this question.</p>
  
  <p>I've been following an old course to build a navbar collapse (sandwich).
  The problem is the page in the course appears to have a black bar on top and navbar appears when shrinking the page. For me, I just get a button on the left. Also, when I shrink the page I don't get the navbar.</p>
  
  <p>here is the source code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="arabic"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  
      &lt;meta charset="utf-8"&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;meta name="description" content=""&gt;
  
      &lt;meta name="author" content=""&gt;
  
      &lt;link rel="icon" herf="assets/img/favicon.ico"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/js/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/js/main.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link href="assets/css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- Font-Awesome icons--&gt;
      &lt;link href="assets/css/font-awesome/css/font-awesome.min.css"&gt;
  
      &lt;!-- Google Fonts LATEEF --&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Changa:400,600&amp;amp;subset=arabic,latin-ext" rel="stylesheet"&gt;
  
      &lt;title&gt;Bootstrap to Wordpress&lt;/title&gt;
  
  
  
  
          &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;!-- HEADER --&gt;
      &lt;header class="site-header" role="banner"&gt;
  
           &lt;!-- NAVBAR --&gt;
           &lt;div class="navbar-wrapper"&gt;
               &lt;div class="navbar navbar-inverse 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=".navbar-collapse"&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" herf="/"&gt;&lt;img src="assets/img/logo.png" alt="Bootstrap to WordPress"&gt;&lt;/a&gt;
                        &lt;/div&gt;&lt;!-- navbar-header --&gt;
                        &lt;div class="navbar-collapse collapse"&gt;
  
                        &lt;/div&gt;&lt;!-- collapse nav--&gt;
                    &lt;/div&gt;&lt;!-- container --&gt;
  
               &lt;/div&gt;&lt;!-- navbar --&gt;
  
  
           &lt;/div&gt;&lt;!-- navbar-wrapper--&gt;
  
  
      &lt;/header&gt;
  
      &lt;!-- FOOTER TAG --&gt;
      &lt;footer&gt;
  
      &lt;/footer&gt;
  
      &lt;!-- MODAL --&gt;
      &lt;div&gt;
  
      &lt;/div&gt;
  
      &lt;!-- BOOTSTRAP CORE JAVASCRIPT
            PLACED AT THE END OF THE DOCUMENT SO THE PAGES
            LOAD FASTER!
      ================================================== --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/js/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/js/main.js"&gt;&lt;/script&gt;
  
      &lt;!-- Type google font --&gt;
      &lt;script src="https://use.typekit.net/byz5vqz.js"&gt;&lt;/script&gt;
      &lt;script&gt;try{Typekit.load({ async: true });}catch(e){}&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried to change this part with another source code, yet the problem occurs again.</p>
  
  <pre><code> &lt;!-- NAVBAR --&gt;
               &lt;div class="navbar-wrapper"&gt;
                   &lt;div class="navbar navbar-inverse 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=".navbar-collapse"&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" herf="/"&gt;&lt;img src="assets/img/logo.png" alt="Bootstrap to WordPress"&gt;&lt;/a&gt;
                            &lt;/div&gt;&lt;!-- navbar-header --&gt;
                            &lt;div class="navbar-collapse collapse"&gt;
  
                            &lt;/div&gt;&lt;!-- collapse nav--&gt;
                        &lt;/div&gt;&lt;!-- container --&gt;
  
                   &lt;/div&gt;&lt;!-- navbar --&gt;
              &lt;/div&gt;&lt;!-- navbar-wrapper--&gt;
  </code></pre>
  
  <p>UPDATE:
  @Bhanu pratap solved the propblem by addin ul and li to show the visible effects. here is his source code:</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  
  &lt;div class="navbar-wrapper"&gt;
          &lt;div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
  
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"&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" herf="/"&gt;&lt;img src="assets/img/logo.png" alt="Bootstrap to WordPress"&gt;&lt;/a&gt;
                  &lt;/div&gt;&lt;!-- navbar-header --&gt;
                  &lt;div class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;
                              &lt;a href=""&gt;First Menu Item&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href=""&gt;Second Menu Item&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href=""&gt;Third Menu Item&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;&lt;!-- collapse nav--&gt;
              &lt;/div&gt;&lt;!-- container --&gt;
  
          &lt;/div&gt;&lt;!-- navbar --&gt;
      &lt;/div&gt;
  </code></pre>