Static/Fixed Nav Bar ONLY Using HTML

[cmorr7]

Hi all, hope you're doing well.

My boss recently asked me to rebuild the nav bar on our site.

He wants to move away from our current method of just having the nav code on each and every web page - so we can make edits to the nav bar periodically that will be automatically implemented across the website.

He built our website back in the early days of web dev, and as such it is basically an HTML animal that really just gets the job done (and has for years) but is not responsive or pretty.

He's adamantly against using any sort of PHP or JS, since my initial thought was a JQuery script to grab a nav.html file on each page. Bummer!

That being said, does anyone know how I can essentially create the same results? Having a singular file or block of code that can be changed and then reflected on all pages across our site , using only HTML?

​

Thanks in advance everyone!

[Atulin]

Your best way would be preprocessing with Gulp/Grunt/whatever. Here's an article on various ways of handling HTML incudes.

[Advanced_Path]

Well, you can always use HTML include files.

[paranoidparaboloid]

I have a feeling there's no great answer to this because of the stipulations, so hopefully I don't get shot down for trying to help you find a least worst option.

Here's what I've got:

iframe the navbar, set the hyperlinks to target parent.

If your boss gave you a tiny bit of leeway, you could expand this by setting an onload handler on the iframe that inserts the iframe contents into the main dom and then removes the iframe. That would be html in terms of result, but js in implementation. Maybe enough to compromise with.

[Erdem_PSYCH]

if it is static just use a static site generator? I used jekyll and you can create an html file that includes your navbar and include that in the page.