title: Adding a dropdown login in bootstrap
body: <p>I am following <a href="http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/" rel="nofollow">this guide</a></p>
  
  <p>I added the first snippet of code to my existing navbar, and then added the second snippet to where it says . However, the pop-up login doesn't appear. What's the problem with my code? In addition, where do I add the 3rd snippet of code?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;SiteTitle&lt;/title&gt;
      &lt;meta name"viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="keywords" content=""&gt;
  
      &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
      &lt;style&gt;
        body {
          padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="navbar navbar-fixed-top"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
            &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&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;/a&gt;
            &lt;a class="brand" href="#"&gt;My Site&lt;/a&gt;
  
          &lt;!-- The drop down menu --&gt;
          &lt;ul class="nav pull-right"&gt;
            &lt;li&gt;&lt;a href="/users/sign_up"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
            &lt;li class="divider-vertical"&gt;&lt;/li&gt;
            &lt;li class="drop down"&gt;
              &lt;a class="dropdown-toggle" href="#" data-toggle="dropdown"&gt;Sign In &lt;strong class="caret"&gt;&lt;/strong&gt;&lt;/a&gt;
              &lt;div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;"&gt;
                            &lt;!-- Login form here --&gt;
                &lt;form action="[YOUR ACTION]" method="post" accept-charset="UTF-8"&gt;
                    &lt;input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" /&gt;
                    &lt;input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" /&gt;
                    &lt;input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" /&gt;
                    &lt;label class="string optional" for="user_remember_me"&gt; Remember me&lt;/label&gt;
  
                    &lt;input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" /&gt;
                &lt;/form&gt;
              &lt;/div&gt;
  
            &lt;/li&gt;
          &lt;/ul&gt;
            &lt;div class="nav-collapse"&gt;
              &lt;ul class="nav"&gt;
                &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#calender"&gt;Calender&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="container"&gt;
  
        &lt;h1&gt;Bootstrap starter template&lt;/h1&gt;
        &lt;p&gt;Use this document as a way to quick start any new project.&lt;br&gt; All you get is this message and a barebones HTML document.&lt;/p&gt;
  
      &lt;/div&gt; &lt;!-- /container --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>