title: Bootstrap Navbar Dropdown Menu not dropping down in Codepen.io
body: <p>Working in codepen.io - Bootstrap dropdown menu not expanding down when clicked.</p>
  <p>HTML:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-toggleable-md navbar-   light bg-faded"&gt;
     &lt;div class="container-fluid"&gt;
        &lt;button class="navbar-toggler hidden-lg-  
        up" style="float:right" type="button" 
        data-toggle="collapse" data-
        target="#navbarNavDropdown" aria-
        controls="navbarNavDropdown" aria-
        expanded="false" aria-label="Toggle 
        navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;
          &lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;&lt;img 
     src="https://s21.postimg.org/7jyged8c7/logo_words_transparent.png" alt="logo" width= "200px" height= "80px"&gt;&lt;/a&gt;
  &lt;div class="collapse navbar-collapse" id="navbarNavDropdown"&gt;
  &lt;ul class="navbar-nav"&gt;
  &lt;li class="nav-item active"&gt;
    &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" href="#"&gt;Our Story&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="nav-item dropdown"&gt;
    &lt;a class="nav-link dropdown-toggle" href="http://example.com" data-toggle= "dropdown"&gt;
      Web Sites
      &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
     &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Business&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;e-Commerce&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Web Applications&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="nav-item dropdown"&gt;
    &lt;a class="nav-link dropdown-toggle" href="http://example.com"&gt;
      Social Media
    &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Social Marketing&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Content Management&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Communities and Influencers&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Social Intelligence&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="nav-item dropdown"&gt;
    &lt;a class="nav-link dropdown-toggle" href="http://example.com"&gt;
      Digital Marketing
    &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;SEO&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;AdWords&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Email Marketing&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
    &lt;a class="nav-link dropdown-toggle" href="http://example.com"&gt;
      User Experience
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Interface Development&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;User Analysis&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="nav-item dropdown"&gt;
    &lt;a class="nav-link dropdown-toggle" href="http://example.com"&gt;
      Graphic Design
    &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Logo Design&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Printed Media&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Printing Support&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="nav-item dropdown"&gt;
    &lt;a class="nav-link dropdown-toggle" href="http://example.com"&gt;
      Training
    &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;DIY Wordpress&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;DIY Social Marketing&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;DIY SEO&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" href="#"&gt;Portfolio&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" href="#"&gt;Blog&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" href="#"&gt;Contact&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://codepen.io/markabeaton/pen/XMqvOO" rel="nofollow noreferrer">enter link description here</a></p>
  <p>I have seen other questions asked that talk about the order of inserting scripts but I am unsure how to do this using codepen.io.</p>
  <p>Thanks for your help.</p>