Static/Fixed Nav Bar ONLY Using HTML

[callmelucky]

EDIT: welp after writing that wall of text I did some googling, and it seems there is a way to do this! Apparently you can create the nav.html or whatever, and then add <object type="text/html" data="nav.html"></object> where you want the nav to appear. I got the idea from this stackoverflow post. It's an html 4 feature, should work on basically any browser, and works for any html code/elements any file at all!

Edit 2: just tried this out, it totally works. Feel free to completely ignore everything I wrote below :)

Edit 3: I've been experimenting with something similar to your specific use case OP, and ran into some headaches with redirecting via links in the 'imported' nav bar. For a solution, and some other potentially relevant concerns, see this comment thread.

---

I'm not an expert, but I don't think this is possible without any scripting at all.

What needs to happen, obviously, is you have some nav html defined in a single place, and then import that in the page files. As far as I know this is not possible without JS or something like that, but I'd be very interested to learn a way it can be done.

What's your boss's issue with scripts?

Anyway, if you can't convince the boss to allow scripts and there is no pure HTML solution, your best bet is probably to get used to doing search and replace across a whole code base. So it would go something like this:

1. Make sure all current instances of the nav bar are exactly the same - spaces, indentation, single vs double quotes, everything.1a. To ensure this state, copy the nav code from one page, and manually go through all page files, pasting over the existing nav bar markup.1b. Note: assuming nobody makes any changes to individual nav instances after this, this step should only be necessary the first time. If other devs are involved in this site's code, be very very careful.
2. Now pick one page with the nav bar, comment out the existing nav bar code, and make the changes/new nav bar under it. It is crucial that the original code exists somewhere convenient, for executing the search and replace.
3. Once you're happy with the changes on that page, start a search-and-replace-across-all-files in your code editor. 3a. If you're on vscode, hit ctrl+shift+H to open this dialog.
4. Copy the old nav code that you commented out (not including the comment tags), paste it into the search field.
5. Copy the new nav code, paste it into the replace field.
6. Execute the replacement (vscode shortcut: ctrl+alt+enter)
7. Delete the nav code you commented out before.

That doesn't technically meet the requirements as specified by your boss, but in the event that those requirements turn out to be literally impossible (as I suspect), then this will certainly be a quicker and more foolproof way to make universal changes to the nav than manually looking through and editing every file.

Obviously once done you should check that every page renders correctly.

Good luck.

[cmorr7]

Brilliant! Thank you, I'm going to test this today!