title: Bootstrap navbar-toggle won't automatically populate
body: <p>I am using bootstrap for the first time, and have seen examples online about toggle menus being able to automatically populate themselves with all the links in the non-toggle version. I attempted to do this below but for some reason mine doesn't seem to work.</p>
  
  <p>I've also looked all over but cannot find any answers on other posts or websites that can help me.</p>
  
  <p>Any help would be really appreciated.</p>
  
  <pre><code>&lt;nav class="navbar"&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="#myNavbar"&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 class="collapse navbar-collapse" id="myNavbar"&gt;
              &lt;ul class="navi nav navbar-nav"&gt;
                  &lt;li class="dropdowni dropdown"&gt;
                      &lt;a class="dropdowni dropdown-toggle" id="nobackground" data-toggle="dropdown" href="#"&gt;Option 1&lt;/a&gt;
                      &lt;ul class="dropdowni dropdown-menu"&gt;
                          &lt;a href="#"&gt;&lt;li&gt;Option 1-1&lt;/li&gt;&lt;/a&gt;
                          &lt;a href="#"&gt;&lt;li&gt;Option 1-2&lt;/li&gt;&lt;/a&gt;
                          &lt;a href="#"&gt;&lt;li&gt;Option 1-3&lt;/li&gt;&lt;/a&gt;
                          &lt;a href="#"&gt;&lt;li&gt;Option 1-4&lt;/li&gt;&lt;/a&gt;
                          &lt;a href="#"&gt;&lt;li&gt;Option 1-5&lt;/li&gt;&lt;/a&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li id="grey"&gt;//&lt;/li&gt;
                  &lt;li&gt;&lt;a id="nobackground" href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li id="grey"&gt;//&lt;/li&gt;
                  &lt;li&gt;&lt;a id="nobackground" href="#"&gt;Option 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li id="grey"&gt;//&lt;/li&gt;
                  &lt;li&gt;&lt;a id="nobackground" href="#"&gt;Option 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I'm sorry if my code is messy - I've not done much web development before. I'm guessing it's to do with some ordering of the <code>&lt;li&gt;</code> and <code>&lt;a&gt;</code> tags, but I could not work it out.</p>
  
  <p>Thank you.</p>