title: Bootstrap navbar not collapsing when run as Wordpress theme
body: <p>I had a working static HTML site using Bootstrap and a collapsing navbar, but when I split it to turn it into a Wordpress theme, the design is fine, the only thing that doesn't work fine is the navbar when in the mobile viewport. The navbar will open to show the links but it won't collapse again, and it stuck open.</p>
  
  <p>Putting the code inside header.php into a normal HTML file renders the navbar fine.</p>
  
  <p>header.php</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;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;!-- Bootstrap + dependencies --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;!-- style --&gt;
      &lt;link href="&lt;?php echo get_bloginfo('template_directory'); ?&gt;/style.css" rel="stylesheet"&gt;
  
  
      &lt;!-- Image and text --&gt;
      &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
        &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarNavAltMarkup"&gt;
          &lt;div class="navbar-nav"&gt;
            &lt;a class="nav-item nav-link active" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-item nav-link" href="#"&gt;Features&lt;/a&gt;
            &lt;a class="nav-item nav-link" href="#"&gt;Pricing&lt;/a&gt;
            &lt;a class="nav-item nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>