title: Display the page title in the header when it is a separate html file included in multiple pages
body: <p>I have created a top bar with a sidemenu in order to navigate through multiple pages. I would like to display the page title in this top bar according to the page where it is loaded. This is my top bar:</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-js lang-js prettyprint-override"><code>function openNav() {
      document.getElementById("mySidepanel").style.width = "280px";
  }
  
  function closeNav() {
      document.getElementById("mySidepanel").style.width = "0";
  }
  
  var dropdown = document.getElementsByClassName("dropdown-btn");
  var i;
  
  for (i = 0; i &lt; dropdown.length; i++) {
      dropdown[i].addEventListener("click", function() {
       this.classList.toggle("active");
       var dropdownContent = this.nextElementSibling;
       if (dropdownContent.style.display === "block") {
           dropdownContent.style.display = "none";
       } else {
           dropdownContent.style.display = "block";
       }
   });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,html{
   padding:0;margin:0;
   background-color:#F4F4F4;
  }
  
  #wrapper-header{
   color:white;
      font-size: 28px;
   float:left;
   width:105%;
   height:65px;
   background-color:#2E2D30;
  }
  
  #main-header{
   position:relative;
   width:1200px;
   left:50%;
   margin-left:-580px;
   height:auto;
  }
  
  .page-title{
   position: absolute;
      height: 20px;
      left: 25%;
      top: 45%;
      transform: translate(-50%, -50%);
  }
  
  .sidepanel {
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
   background-color: #111;
   font-family: 'Times New Roman', Times, serif;
   overflow-x: hidden;
   padding-top: 60px;
   transition: 0.5s; 
    }
    
    .sidepanel a, .dropdown-btn {
   padding: 8px 8px 8px 32px;
   text-decoration: none;
   font-size: 25px;
   color: #818181;
   display: block;
   border: none;
      background: none;
   transition: 0.3s;
   outline: none;
   font-family: 'Times New Roman', Times, serif;
    }
    
    .sidepanel a:hover, .dropdown-btn:hover {
   color: #f1f1f1;
    }
    
    .sidepanel .closebtn {
   position: absolute;
   top: 0;
   right: 25px;
   font-size: 36px;
   margin-left: 50px;
    }
    
    .openbtn {
   font-size: 20px;
   cursor: pointer;
   background-color: #2E2D30;
   color: white;
   padding: 10px 15px;
   border: none;
   transform: scale(1.6);
    }
    
    .openbtn:hover {
   background-color: rgb(53, 53, 53);
    }
  
  .dropdown-container {
   display: none;
   background-color: #262626;
   padding-left: 8px;
   font-family: 'Times New Roman', Times, serif;
    }
    
    .fa-caret-down {
   margin-left: 18px;
   float: right;
   padding-right: 2px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper-header"&gt;
   &lt;div id="main-header" class="object"&gt;
    &lt;button class="openbtn" onclick="openNav()"&gt;&amp;#9776;&lt;/button&gt;
    &lt;div class="page-title"&gt;PAGE TITLE&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- NAVBAR --&gt;
  
  &lt;div id="mySidepanel" class="sidepanel"&gt;
   &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
   &lt;a href="#"&gt;Recientes&lt;/a&gt;
   &lt;button class="dropdown-btn"&gt;Para empezar
       &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/button&gt;
   &lt;div class="dropdown-container"&gt;
    &lt;a href="#"&gt;Nivel 1-5&lt;/a&gt;
       &lt;a href="#"&gt;Nivel 6-10&lt;/a&gt;
    &lt;a href="#"&gt;Nivel 11-15&lt;/a&gt;
   &lt;/div&gt;
   &lt;a href="#"&gt;Arreglos&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So basically it would be to display the page title in the  element with the class "page-title". I am avoiding to use php so far because it is a static web page and I am hosting it locally. That is why I am including the html file in multiple pages using jquery instead of php or any other server side method.</p>