Search code examples
javascripthtmlcssheaderfooter

Universal header in HTML

I want to create a universal header (and footer) using HTML/CSS/Javascript so that if I update it to one page, it automatically updates on the rest. I also want to be able to choose which link is showing up with the active class on it. Also, I am using bootstrap. Here are some criteria I need to meet:

  • No PHP
  • No Server side (must work on github pages)

Thank you in advance,

Albert

Solution

  • You can use jQuery to .load a HTML file:

    HTML

    <div id="header"></div>

    jQuery

    $('#header').load('static.html');

    Alternatively, you could use iframe to load your static header. See this answer for more information regarding the available techniques.