title: Two different Styles for Dropdowns in Bootstrap 3?
body: <p>So I am creating a dashboard currently using Bootstrap 3 and I'm trying to style two separate dropdown menus, everytime I try to change the style for the sidebar navigation to make it different from the main menu navigation dropdown it doesn't pick it up. So the dropdowns work on both navigation's, but I want two separate styles and I can't figure out how to get it working. Thanks!!</p>
  
  <p>Side Bar</p>
  
  <pre><code> &lt;div class="container-fluid"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-sm-3 col-md-3 col-lg-3 sidebar"&gt;
                &lt;ul class="nav nav-sidebar"&gt;
                  &lt;li class="active"&gt;&lt;a hdata-target="#" data-toggle="dropdown"&gt;Overview&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;blah&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Analytics&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Export&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul class="nav nav-sidebar"&gt;
                  &lt;li&gt;&lt;a href=""&gt;Nav item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Nav item again&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;One more nav&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Another nav item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;More navigation&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul class="nav nav-sidebar"&gt;
                  &lt;li&gt;&lt;a href=""&gt;Nav item again&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;One more nav&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Another nav item&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 col-lg-9 col-lg-offset-3 main"&gt;
                &lt;h1 class="sub-header"&gt;Edit Content&lt;/h1&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Navigation Bar</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="dropdown"&gt;
            &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Application&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Administor&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Reports&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Entities&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Customers&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Marketing&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Monitor&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;My Info&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Help&lt;/a&gt;
           &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>