Single Navigation Bar Across Website

Single navigation bar across website?

JQuery

As JQuery is JS-based, you might be allowed to use it. You could then add a navigation div into each page's template:

<div id="navigation"></div>

and include a script on each page that executes the following JQuery-code:

$(function() {
    $("#navigation").load("navigation.html");
});

Pure JavaScript

Alternatively, if you cannot use JQuery whatsoever, you could use plain JavaScript, which is more lightweight but not as clean.

Wherever you want to include the navigation, simply include a script:

<script src="nav.js"></script>

Which holds your navigation based on document.write:

document.write('<div>\
    ... your navigation content ...\
    </div>\
');

How to reuse a navigation bar across different .html pages with CSS and JS?

Honestly, there's not an easy way to do this with vanilla Javascript. You basically have to either create the navbar using JS, which can then be imported to each page, or you have to copy and paste it.

The industry solution to this problem is to use React, Vue or Angular, all technologies which allow you to create and reuse JSX 'components'. In other words, in React, you could create a navbar component, which could easily be imported in any 'page' of the website. But with vanilla HTML/Javascript, it's really not an option.

One navigation bar for multiple pages without JavaScript

If you do not want to use javascript, the other option would be to use PHP to include the files on all the pages you would require the navbar. So essentially, you would copy the navbar snippet into a single file, then using PHP methods (require or include), to add the snippets on all other pages. This way, you only need to edit that navbar snippet you copied whenever you need to make a change and it'll take effect on any page you have either required or included. More info on how to use include and require here

How can I reuse and html navbar on each page of my website?

On your site you are loading jquery in the head and then loading jquery slim in the foot of your page. In jquery slim load() is not supported. Instead of loading 2 versions of jquery lust load the full version of jquery in your foot section and place your jquery code after that. Here is how your page should look:

<!DOCTYPE html>
<html lang="en">
<head>

</head>

<body>

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<!--end of Navigation bar-->

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(function(){
  $("#nav-placeholder").load("navbar.html");
});
</script>
</body>

How can I make my navi-bar the same across my html?

I figured it out myself, you can use a JavaScript file and use document.write then put this where you want it to go:

<script type="text/javascript" src="/js/sidebar.js"/>

Here's my js file:

document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");

If you want to use both double quotes and single quotes inside the line, be careful with that, and I think that the < and > signs have to be in double quotes. Here's my full code:

     ----/js/sidebar.js----
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write("<div id='sidebar'>");
if (page==1) { var p=" style='text-decoration: underline;'" } else { var p=" style='text-decoration: normal;'" }
if (page==2) { var pp=" style='text-decoration: underline;'" } else { var pp=" style='text-decoration: normal;'" }
if (page==3) { var ppp=" style='text-decoration: underline;'" } else { var ppp=" style='text-decoration: normal;'" }
if (page==4) { var pppp=" style='text-decoration: underline;'" } else { var pppp=" style='text-decoration: normal;'" }
if (page==5) { var ppppp=" style='text-decoration: underline;'" } else { var ppppp=" style='text-decoration: normal;'" }
document.write("<p><"+'a href="http://brandonc.handcraft.com/"'+p+">Home</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/about"'+pp+">About The Author</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/sevenmages"'+ppp+">The Seven Mages</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/comment"'+pppp+">Leave A Comment</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/calender"'+ppppp+">Calender</a></p>");
document.write("</div>");

     ----In place where you want code to go----
<script>var page=5</script>
<script type="text/javascript" src="/js/sidebar.js"/>

Probably not the most efficient, and I'd defiantly recommend using PHP like in the other answers, but this works for me and doesn't need a .php after every url.

Single Navigation Bar Across Website