title: Use same navbar for multiple .html files?
body: <p>I'm trying to use the same header for multiple .html files.  I'm following <a href="https://stackoverflow.com/questions/27139963/bootstrap-multiple-pages-divs-and-navbar">this thread</a> and <a href="https://stackoverflow.com/questions/31954089/html-css-navigation-bar-on-multiple-pages">some others</a>, but it doesn't seem to be working.  </p>
  
  <p>The header isn't showing on the <code>vba.html</code> page.</p>
  
  <p>navBarTest.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;!-- &lt;script&gt;document.write('&lt;script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"&gt;&lt;/' + 'script&gt;')&lt;/script&gt; --&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="D:\Batman\Documents\- Programming\Bootstrap - v3.3.7\css\bootstrap.css"&gt;
      &lt;style type="text/css"&gt;
      /* Custom CSS goes in here, to override the Bootstrap CSS if you want */
  &lt;/style&gt;
  &lt;title&gt;Navbar test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="nav-placeholder"&gt;&lt;/div&gt;
  
      &lt;script  src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="D:\Batman\Documents\- Programming\Bootstrap - v3.3.7\js\bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $("#nav-placeholder").load("navBar.html");
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm expecting the NavBar to show up where <code>&lt;div id="nav-placeholder"&gt;&lt;/div&gt;</code> is.</p>
  
  <p>navBar.html</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;/button&gt;
              &lt;a class="navbar-brand" href="#"&gt;&lt;i class="fa fa-home" area-hidden="true"&gt;&lt;/i&gt;EtKC&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="about.html"&gt;About &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="mailto:myemail@gmail.com"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Topics &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="vba.html"&gt;VBA&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Separated link&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>