So in the included image, you can see a copy of the website I'm currently working on. The site is going to have separate pages for each of the company's machines. Obviously the navigation bar and menu bar are going to be the same throughout the whole website so I thought I'd make use of a single line of PHP script to just load the menu in each time.
https://i.sstatic.net/rjATR.png (Attached image as I do not have +10 rep yet)
Though, from what I understand, the pages within folders (Not within root) wont be able to link to the rest of the site without the use of ../ within the href.
So if I load the menu part of the site containing the navbar, etc, it won't work on all the pages because they'll all be within different folders, meaning every folder will need it's own version of the navbar PHP import.
Am I going about this the wrong way? I'm just trying to minimize the amount of code I'm using on each page. Not only that, but once I finish the site if I have to make a change to the menu-bar, I don't want to have to update 30-40+ pages. I figured the PHP import would save me that sort of trouble? Is there a better way of doing this that isn't terribly complicated?
It should also be noted that I'm doing this in HTML5 with Twitter-Bootstrap as my main CSS.
I would also be making a similar PHP call that would import a footer as well. If I missed anything that could be of help, please do ask.
TL;DR - How do I make links work throughout the entirety of the site, regardless of where they are in the folder hierarchy. Thought about using a tiny PHP script that would contain the menubar, etc and would be loaded on every single page. Though I'm not sure if that will work due to folders?
Try to start your links from /. This means that url is started from site root.
For example:
<a href="/products/kettles/kettles_patch.html">Patch Kettles</a>