Global navigation header - subpage clicks not working off of subpages

I've been working with github pages to run my website. I am currently trying to develop a global header that can be adjusted in one js file and reflect everywhere. The problem is, I have url link problems when going to subpages when running off of another subpage. I want to be able to call the one js file, and have the links work no matter what the root is.

My html header code:

<!--Set the div for the header bar. Import a js file that runs a specific script to set a universal header amongst all the pages.-->
    <div id="header-bar"></div>
<!--Please note, on subpages the entered src is ../javascript/header-bar.js to adjust to location.-->
    <script src="javascript/header-bar.js"></script>

The js header-bar code:

var headerbar = document.getElementById("header-bar");
//This sets each page/subpage to be the exact same header.
headerbar.innerHTML = '<div class="dropdown"><button class="dropbtn">Games</button><div class="dropdown-content"><a href="universes/index.html">Universe Generator</a><a href="#">Coming soon...</a></div><div class="dropdown"><button class="dropbtn">Tools</button><div class="dropdown-content"><a href="nameGenerator/index.html">Name Generator</a><a href="#">Coming soon...</a></div></div>';

What I believe is occurring is I am linking myself to "nameGenerator/nameGenerator/index.html" instead of "nameGenerator/index.html" whenever on one of these subpages.

Here is a running snippet of my code:

var headerbar = document.getElementById("header-bar");

headerbar.innerHTML = '<div class="dropdown"><button class="dropbtn">Games</button><div class="dropdown-content"><a href="universes/index.html">Universe Generator</a><a href="#">Coming soon...</a></div></div><div class="dropdown"><button class="dropbtn">Tools</button><div class="dropdown-content"><a href="nameGenerator/index.html">Name Generator</a><a href="#">Coming soon...</a></div></div>';

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 20px 20px 0px 0px;
  min-width: 160px;
}
.dropdown {
  position: relative;
  display: inline-block;
  padding: 0px 2px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

#header-bar {
	background-color: #509b53;
}
#header-bar:hover {
	background-color: #66ba69;
}

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="css/global.css"/>
	</head>
    <body>
		
		<!--Set the div for the header bar. Import a js file that runs a specific script to set a universal header amongst all the pages.-->
		<div id="header-bar"></div>
		<script src="javascript/header-bar.js"></script>
		
	</body>
</html>

How am I able to setup the href's so that no matter what page or subpage I am on the links will work correctly? I want to have the system be fully automated, with no need to change roots for each subpage/page. My guess is I need to have a special root symbol in front of each url, but after a hour of stackoverflow & google I can't find anything.

Thanks in advance!

Side note: I can't just put the whole local url file, as when I import to github I'd have to change it all over from the local url to the github url.

Solution

Try this on your href:

href="../universes/index.html"

This goes up one level (the root folder) and gets to -> universes -> index.html

Updated

Based on further comments from you, here is a workable solution:

var href = document.location.href;
var current_dir = href.substr(0, href.lastIndexOf('/'));

This should works in any directory:

headerbar.innerHTML = '<a href="'+current_dir+'/index.html">Universe Generator</a>