title: How to include navigation bar in one html file into another html file
body: <p>I have a navigation bar in one html file and want to include it into multiple html files. Below is my header.html file.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://www.w3schools.com/w3css/4/w3.css&quot;&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;site.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
  
  &lt;body&gt;
  
  
  
  &lt;div class=&quot;w3-top top&quot; id=&quot;header&quot;&gt;
      &lt;div class=&quot;w3-bar w3-red &quot; style=&quot;padding:20px;&quot;&gt;
          &lt;img src='Images\menubar-logo-white.png' width=&quot;150&quot; height=&quot;50&quot;&gt;
          &lt;div class=&quot;w3-right topnav&quot; id=&quot;myTopnav&quot;&gt;
              &lt;a href=&quot;home.html&quot; class=&quot;active&quot;&gt;HOME&lt;/a&gt;
              &lt;a href=&quot;about.html&quot;&gt;ABOUT&lt;/a&gt;
              &lt;a href=&quot;service.html&quot;&gt;SERVICES&lt;/a&gt;
              &lt;a href=&quot;contact.html&quot;&gt;CONTACT&lt;/a&gt;
  
              &lt;a href=&quot;javascript:void(0);&quot; style=&quot;font-size:15px;&quot; class=&quot;icon&quot; onclick=&quot;myFunction()&quot;&gt;&amp;#9776;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
          &lt;script&gt;
              function myFunction() {
                  var x = document.getElementById(&quot;myTopnav&quot;);
                  if (x.className === &quot;topnav&quot;) {
                      x.className += &quot; responsive&quot;;
                  } else {
                      x.className = &quot;topnav&quot;;
                  }
              }
          &lt;/script&gt;
  </code></pre>
  
  
  <p>Then I use embed tag and it works. However, the navigation bar does not working and not linked to the particular page if I go to home, about, services, and contact page. The code in home.html is as below:</p>
  <pre><code>&lt;div class=&quot;w3-top top&quot;&gt;
      
      &lt;div class=&quot;w3-bar w3-red &quot; style=&quot;padding-left:65px;padding-bottom:20px;padding-top:20px; padding-right:80px&quot;&gt;
          &lt;embed type=&quot;text/html&quot; src=&quot;header.html&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>How can I resolve this?</p>