title: Unable to make navigation buttons disappear on lg and md views, unable to drop down menu button
body: <p>I hope to seek some advice from you guys about the issues I am unable to resolve while coding a simple responsive website.</p>
  
  <p>The navigation buttons should not appear at all and the drop down box should be activated when in xs view.</p>
  
  <p>I am using Twitter bootstrap.</p>
  
  <p>Here is my coding:</p>
  
  <pre><code>&lt;nav id="header-nav" class="navbar navbar-default"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;div class="navbar-brand"&gt;
                  &lt;a href="index-html"&gt;&lt;h1&gt;Food, LLC&lt;/h1&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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;/div&gt;
  
          &lt;div id="collapsable-nav" class="collapse navbar-collapse"&gt;
         &lt;ul id="nav-list" class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;
                  &lt;a href="chicken.html"&gt;&lt;span class="visible-xs"&gt;&lt;/span&gt;Chicken&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="beef.html"&gt;&lt;span class="visible-xs"&gt;&lt;/span&gt;Beef&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="seafood.html"&gt;&lt;span class="visible-xs"&gt;&lt;/span&gt;Seafood&lt;/a&gt;
              &lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>The css coding is as follows:</p>
  
  <pre><code>body {
      font-size: 16px;
      color: #F0FFFF;
      background-color: #778899;
      font-family: 'Source Sans Pro', sans-serif;
  
  #header-nav {
      background-color: #2F4F4F;
      border-radius: 0;
      border: 0;
      padding: 25px;
  }
  .navbar-brand h1 { /**Restaurant name**/
      font-family: 'Jura', sans-serif;
      color: #FFFFFF;
      font-size: 2em;
      font-weight: bolder;
      text-shadow: 1.5px 1.5px #FFD700;
      margin-top: 0;
      margin-bottom: 0;
      line-height: 0.5;
  }
  .navbar-brand a:hover, .navbar-brand a:focus {
      text-decoration: none;
  }
  #nav-list {
      margin-top: 10px;
  }
  #nav-list a {
      color: #FFFAF0;
      text-align: center;
  }
  #nav-list a:hover {
      background: #FFD700;
  }
  #nav-list a span {
      font-size: 1.5em;
  }
  </code></pre>
  
  <p>Could someone kindly point out where I have gone wrong? Why am I still able to see the navigation buttons at the header? Why doesn't the menu drop down when in xs view?</p>
  
  <p>Thank you, appreciate the help!</p>