title: Bootstrap Navbar Collapse Dropdown Menu
body: <p>I am working on a Bootstrap Website with a dropdown box in the Navbar. When the Navbar is in collapse mode. The dropdown menu is not responding
  Does anyone know why this would happen</p>
  
  <p>The website can be found at <a href="http://horizonarb.co.uk/index.html" rel="nofollow">http://horizonarb.co.uk/index.html</a></p>
  
  <p>The code is as follows;</p>
  
  <p>Many thanks!</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&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;Horizon Arboriculture&lt;/title&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- Google Fonts --&gt;
      &lt;script src="js/googleFonts.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'&gt;
  
       &lt;!-- Custom CSS --&gt;
      &lt;link href="css/custom.css" rel="stylesheet"&gt;&lt;/link&gt;
  
      &lt;!-- Font Awesome --&gt;
      &lt;link rel="stylesheet" href="css/fontawesome/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.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="navbar navbar-default navbar-static-top" style="margin-bottom: 0px;"&gt;
  
          &lt;div class="container"&gt;
  
              &lt;div class="navbar-header"&gt;
  
                  &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;small&gt;MENU&lt;/small&gt;
                  &lt;/button&gt;
  
               &lt;a href=""&gt;&lt;img src="img/front/HorizonArb_Tree_Transparent.png" class="noResize"&gt;&lt;/a&gt;
  
              &lt;/div&gt; &lt;!-- class="navbar-header" --&gt;
  
              &lt;div class="collapse navbar-collapse"&gt;
  
                  &lt;ul class="nav nav-pills navbar-right"&gt;
  
                      &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Services &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Crown Thinning&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Crown Lifting&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Crown Reduction&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
  
              &lt;/div&gt; &lt;!-- class="collapse navbar-collapse" --&gt;
  
          &lt;/div&gt; &lt;!-- class="container" --&gt;
  
        &lt;/div&gt; &lt;!--  class="navbar navbar-default" --&gt;    
  
  
  
        &lt;div class="container" id="topContainer"&gt;
  
          &lt;div class="row"&gt;
  
              &lt;div class="col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-3 center marginTopThirty"&gt;
  
                  &lt;img src="img/front/HorizonArb_Transparent.png" width="70%"&gt;
  
  
              &lt;/div&gt;
  
  
  
  
  
  
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>