Good, you are making progress! Yes footers are tricky sometimes to keep at the bottom, I remember having to fix that too. You've fixed your first bug, congrats!
If you got an output of links, it worked! you haven't styled that place or those links yet, that's why its just plain text.
Try putting the wayfinder call inside a <div>, and let's add a bit of color to it, and then just for fun let's try to float it to the left side of the page:
<div style="float:left;border: 1px black;"> [[Wayfinder call]] </div>
I don't know if the border will work to be honest.
You can always change the css on the fly using in-line css in a number of places, like I just did above. It takes some getting used to but you can control every little space if you want. Generally in-line isn't so great because its better to assign classes, but personally I will just throw some in-line rules whenever I want to adjust something.
For the header, yes a navigation bar is useful, and this isn't too hard but can be a bit tricky. Remember it needs to adjust properly for different sized devices.
The one you choose is based on your preference, but of course you have to worry about what you can implement.
Personally I think you could stick with the bootstrap template, it will work well and you can customize it, you can ask here and we can help you find where.
I agree about the naming in bootstrap, it can be hard to know how to change things. Each of those terms is pulling in classes, like "navbar". In the bootstrap there is just class after class, like navbar-fluid or navbar-wrap and so on.
In-line styles are one way to change these, in-line always supersedes other css, although some classes will come from the parent element, but that's a more advanced subject.
For two vertical menus, do you want them one on top of the other, on the left or the right? Many typical styles have like a box to the left or right with various info, and then the page content on the other side.
