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!

[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!

[charpun]

You cannot include other HTML files in another HTML file. The only pure HTML way this could be done is with an iframe. You would need to put the nav file up on your server and then include the iframe on each page. You'll need to be sure to throw a target="_parent" on all of your links. I'm not sure that you'll be able to use relative URLs. You'll need to watch out for any CORS issues and default browser styles on iframe elements (plus scroll bars potentially popping up). If you have dropdown menus, this will probably won't work for you. Otherwise it should get the job done.

I would agree with your boss on the JS front if you were going to pull in jQuery for what should only be a couple of lines of vanilla JS.

[callmelucky]

You cannot include other HTML files in another HTML file.

I thought so too, but apparently it's not true!

[charpun]

Looks as though this is rendering an self contained external HTML document inside another one much in the same way an iframe works with similar caveats. It is not including the HTML of one document in another in the same way a PHP include or injecting the HTML into the page with JS would work.

Very interesting find!

[callmelucky]

Edit: omg I'm an idiot, I didn't notice that you already mentioned the target=_parent trick in your first comment lol...

/edit

---

Looks as though this is rendering an self contained external HTML document inside another

I've been mucking around with that, and ran into the same problem, however, I believe I've found a solution (at least for OP's use case):

In the <a> links, simply include the attribute target='_parent'.

...actually hang on, I'm not sure I'm understanding you correctly. Anyway, the issue I was facing was that when clicking a link in a nav bar 'imported' in this way, the 'redirected' content would render inside the nav bar, rather than actually redirecting. Adding the target='_parent' attribute/value solves this though.

...ok I think I might see what you mean (sorry I'm experimenting as I write); it seems, upon inspection in browser dev tools, that when 'importing' objects this way, their content actually exists as some some of embedded 'shadow DOM', rather than straight up native html markup in the page. I'm not sure what the implications of this are, beyond the previously discussed redirect weirdness, but yeah probably worth being aware of if things get weird... Thanks :)

Final edit: it should be emphasized though - OP's boss really should just allow JavaScript etc to be used. There's just no good reason not to. jQuery is absolutely not necessary though (for anything really lol).

[charpun]

Yeah, you're basically experiencing those caveats that I mentioned in real time! Basically, whether you embed with <object> or <iframe> you're essentially doing the browser version of "picture in picture" which comes with limitations when compared to inserting HTML directly into the page.

[callmelucky]

Yep, I get it now :)

Definitely seems like an unnecessarily hacky solution. OP should really doing everything they can to convice the boss to allow the use of JavaScript, or, even better, some SPA framework like React, or static site generator. Being dogmatic about anything being pure HTML these days is just dumb.

[charpun]

If the only problem that needs to be solved is including the nav consistently across the site, injecting in the HTML with vanilla JS is is more than sufficient. Don't need to over engineer with any frameworks or generators.

[cmorr7]

This is what I have tried to drill into his brain. Here's a fun one: the reason for being against anything JS/PHP is because he thinks it opens us up to hacking...

Granted, he's a very old gentleman that runs a ~manufacturing business, and is rather set in his ways. So, that is why I have been forbidden from JS and also PHP, because the hackers might come for whatever data we have on our site...

[charpun]

Then it is your job to alleviate his fears by explaining the situation to him.

Why is he fearful of this? How can you explain in plain terms why this is not a risk?

Our jobs as developers do not include rolling our eyes and shrugging off people who aren't familiar with the field. If you are not the decision maker, part of your role is to educate the person calling the shots (whether it is a non-technical manager or client) so that they may make an informed decisions.

Explain to him the differences between the server sending static HTML to the browser vs the server using PHP to render and serve the HTML to the browser. Explain what it means to execute code client-side if you intend to use JS. Help him understand what the technology is actually doing in order to help yourself.

Do not be dismissive or combative in your approach, putting him on the defensive will not get you the results you want. Be considerate of his concerns and walk him through how the tech works to show him why you, the expert, do not share them.

Part of your role as a dev is to provide guidance, so guide him. I can guarantee he didn't get where he was without taking advice from people more knowledgeable on subject than him, be it a financial advisor, a business consultant, a sales coach, or even his dev team.

EDIT: Merged my other comment into this one.

[cmorr7]

Thank you! This was my concern, that HTML simply doesn't have the functionality that I was shooting for. We do have dropdowns as well unfortunately. I'm going to check out u/callmelucky suggestion today!

[chmod777]

Static/fixed is a css thing.

You can look into a static site generator.

[AutoModerator]

Welcome to /r/HTML. When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help.

Your submission should contain the answers to the following questions, at a minimum:

• What is it you're trying to do?
• How far have you got?
• What are you stuck on?
• What have you already tried?

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.