title: Collapsible Navbar Button Does Not Show The Menus When The Screen Size Is Shrunk
body: <p>For some reason when I shrink the screen size to Tablet or Mobile width the collapsible navbar button is not functioning as intended.</p>
  
  <p>Also on the footer the Social Icons are not displaying the logo correctly.All I see are the Icons but not the logos on them.</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>.jumbotron {
      border-radius: 0;
      background-color: #F44336;
      color: #FFF;
      height: 100px;
  }
  
  body{
      padding:0px;
      z-index:0;
  }
  
  .navbar-default {
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head 
           content must come *after* these tags --&gt;
   &lt;title&gt;&lt;/title&gt;
   &lt;!-- Bootstrap --&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;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;link rel="stylesheet" type="text/css" href="https://d396qusza40orc.cloudfront.net/phoenixassets/web-frameworks/bootstrap-social.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="mystyle.css"&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.2/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;div class="container"&gt;
    &lt;div class="jumbotron" style="top:15em; width=100%; margin-bottom:0;"&gt;
     &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
       &lt;nav class="navbar-default" style="margin-bottom:0;""&gt;
        &lt;div class="container-fluid"&gt;
         &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&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;Ristorante Con Fusion&lt;/a&gt;
                         &lt;a class="navbar-brand" href="#"&gt;Ristorante Con Fusion&lt;/a&gt;
                         &lt;a class="navbar-brand" href="#"&gt;Ristorante Con Fusion&lt;/a&gt;
                         &lt;a class="navbar-brand" href="#"&gt;Ristorante Con Fusion&lt;/a&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/nav&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;footer&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;             
                  &lt;div&gt;
                      &lt;h5&gt;Links&lt;/h5&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;h5&gt;Our Address&lt;/h5&gt;
                      &lt;address&gt;
                  121, Clear Water Bay Road&lt;br&gt;
                  Clear Water Bay, Kowloon&lt;br&gt;
                  HONG KONG&lt;br&gt;
                  Tel.: +852 1234 5678&lt;br&gt;
                  Fax: +852 8765 4321&lt;br&gt;
                  Email: &lt;a href="mailto:confusion@food.net"&gt;confusion@food.net&lt;/a&gt;
               &lt;/address&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div class="nav navbar-nav" style="padding: 40px 10px;"&gt;
                          &lt;a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"&gt;&lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"&gt;&lt;i class="fa fa-linkedin"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"&gt;&lt;i class="fa fa-youtube"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a class="btn btn-social-icon" href="mailto:"&gt;&lt;i class="fa fa-envelope-o"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;p style="padding:10px;"&gt;&lt;/p&gt;
                      &lt;p align=center&gt;© Copyright 2015 Ristorante Con Fusion&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
  &lt;/body&gt;
  
  
   &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&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;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>