Html code to repeat same menu on ever page header

[Jamcan]

I have the following menu which is repeated on all pages. How do I have only one header page that can be used to repeat the menu on every page?

<table align="center" width="630" height="30" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="center" align="left">
<img src="images/spacer.gif" width="1" height="12" alt="" title="" border="0" /><br>
<div align="left">
<a href="index.html"><img src="images/BCFLOGO.JPG" width="300" height="80" alt="" title="... a family friendly church in Brampton, Ontario Canada" border="0" /></a>
</div>
</td>
<td valign="center" align="right">
<div align="right">
<a href="http://bcfchurch.net/index.html"><img src="images/bcf1.jpg" width="310" height="137" alt="" title="" border="0" /></a>
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="center" width="970">
<ul id="solidmenu" class="solidblockmenu">
<li><a href="http://bcfchurch.net/index.html"><span style="font-family: 'Century Gothic'; font-weight: bold; font-style: normal; text-decoration: none;">Home Page</span></a></li>
<li><a href="http://bcfchurch.net/about.html"><span style="font-family: 'Century Gothic'; font-weight: bold; font-style: normal; text-decoration: none;">What To Expect</span></a></li>
<li><a href="http://bcfchurch.net/ministry.html" rel="cssdrivemenu[left]"><span style="font-family: 'Century Gothic'; font-weight: bold; font-style: normal; text-decoration: none;">Ministries</span></a></li>
<li><a href="http://bcfchurch.net/event.html" rel="jkmenu"><span style="font-family: 'Century Gothic'; font-weight: bold; font-style: normal; text-decoration: none;">Events</span></a></li>
<li><a href="https://bramcfon.infellowship.com/OnlineGiving/GiveNow/NoAccount/" target="_blank"><span style="font-family: 'Century Gothic'; font-weight: bold; font-style: normal; text-decoration: none;">Donations</span></a></li>
<li><a href="http://bcfchurch.net/past_broadcast.html" rel="onlinemenu"><span style="font-family: 'Century Gothic'; font-weight: bold; font-style: normal; text-decoration: none;">BCF Online</span></a></li>
<li><a href="http://bcfchurch.net/contact.html" >Contact Us</a></li>
</ul>
<!--First mega menu (1) -->
<div id="jkmenu" class="mega solidblocktheme">
<div class="column">
<ul>
<li><a href="https://bramcfon.infellowship.com/Forms/331553" target="_blank">Spiritual Encounter</a></li>
<li><a href="http://www.bcfsports.net" target="_blank">BCF Sports</a></li>
<li><a href="http://bcfchurch.net/life_grp.html">Life Groups</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="http://bcfchurch.net/missions.html">Mission Trips</a></li>
<li><a href="http://bcfchurch.net/gallery.html">Picture Gallery</a></li>
<li><a href="event.html" rel="freescripts">BCF's Events</a></li>
</ul>
</div>
<br style="clear:left" />
</div>
<!--Second mega menu (1.1) -->
<div id="freescripts" class="mega solidblocktheme" style="width:150px">
<ul class="ulmenu">
<li><a href="http://bcfchurch.net/bulletin/current.pdf" target="_blank">Upcoming Events</a></li>
<li><a href="http://bcfchurch.net/calendar.html">Calendar</a></li>
<li><a href="http://a7de6015a152d092ff62-9d1643a2f09aac594dcb42fda6529426.r6.cf1.rackcdn.com/4Q15-Newsletter-1.0.pdf" target="_blank">Newsletter</a></li>
</ul>
</div>
<!--Forth mega menu (2) -->
<div id="cssdrivemenu" class="mega solidblocktheme">
<div class="column">
<ul>
<li><a href="http://bcfchurch.net/kidz.html">Children Ministry</a></li>
<li><a href="https://www.facebook.com/groups/239576229463272/">Young Adults</a></li>
<li><a href="http://bcfchurch.net/missions.html">Missions</a></li>
<li><a href="http://bcfchurch.net/ministry.html#life">Life Groups</a></li>
<li><a href="http://www.elevatemensconference.ca/">Men Ministry</a></li>
<li><a href="#">Women Ministry</a></li>
<li><a href="http://bcfchurch.net/ministry.html#worship">Worship Arts</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="http://bcfchurch.net/baptism.html">Baptism</a></li>
<li><a href="http://bcfchurch.net/Child_ded.html">Child Dedication</a></li>
<li><a href="http://bcfchurch.net/ministry.html#pray">Prayer Request</a></li>
<li><a href="http://webmasterbcf.wix.com/bcf-health">Health Blog</a></li>
<li><a href="http://bcfchurch.net/encounter.html">Spiritual Encounters</a></li>
<li><a href="http://www.bcfsports.net/" target="_blank">Sports Ministry</a></li>
<li><a href="http://bcfchurch.net/event.html" rel="freescripts2">Events</a></li>
</ul>
</div>
</div>
<!--fifth mega menu (1.1) -->
<div id="freescripts2" class="mega solidblocktheme" style="width:150px">
<ul class="ulmenu">
<li><a href="http://bcfchurch.net/calendar.html">Calendar</a></li>
<li><a href="http://bcfchurch.net/event.html">Upcoming Events</a></li>
<li><a href="http://bcfchurch.net/bulletin.pdf" target="_blank">Current Bulletin</a></li>
</ul>
</div>
<!--Third mega menu (1) -->
<div id="onlinemenu" class="mega solidblocktheme">
<div class="column">
<ul>
<li><a href="https://livestream.com/accounts/5183358" target="_blank">Live Broadcast</a></li>
<li><a href="http://bcfchurch.net/past_broadcast.html">Past Services</a></li>
<li><a href="http://subsplash.com/bcf_online/app" target="_blank">BCF APP</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="https://www.facebook.com/bcfchurchbrampton" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/BCF_Church" target="_blank">Twitter</a></li>
<li><a href="https://www.youtube.com/channel/UCRidN1MmKvfm6Sa_8d4O0fw?feature=watch" target="_blank">YouTube</a></li>
</ul>
</div>
<br style="clear:left" />
</div>
</td>
</tr>
</table>

[styxlawyer]

Put that code in a separate file and then include it in all your pages with either PHP or SSI.

[mlegg]

Most of your code is very outdated. Go to https://validator.w3.org/nu/#textarea and check all of the errors. You should be using css for a lot of it.

[DyDr]

With that much content and links, you may want to consider a different approach, of using a Content Management System (CMS.) There are several free CMS - http://www.opensourcecms.com/

With a CMS, all you would do is enter and manage the actual content and external links (you can actually display the external content in an iframe on your site, rather than have it open in a new window) for the site. You would have a single html template so that everything will be consistent throughout the site. The CMS would produce the navigation automatically and would be able to highlight the link for the current page. Some of your content looks like it is dynamic, such as the events and calendar. A CMS would allow you to just enter the event/calendar information and it would display the correct current/future content and handle the archiving/display of old information. A CMS would also allow the site to have a search function to make it easier for visitors to find information.

[molendijk]

styxlawyer's way is the way to do it. If you don't know how to use PHP/SSI, do the following:
1. Create a separate file menu.html and put your menu-code in it.
2. On each page where you want the menu to appear, write:
<div>
<iframe id="menu" src="menu.html" style="position: absolute; width:0; height:0; opacity:0; display: none" onload="var x=document.getElementById('menu'); var y=(x.contentWindow || x.contentDocument); if (y.document){y=y.document; this.parentNode.innerHTML=y.body.innerHTML}"></iframe>
</div>

[mlegg]

do you have a live example where I can see that? thanks, and sorry for jumping in

[molendijk]

No, I don't have a live example. But you can just follow the instructions and watch it happen. Put anything you want in menu.html.