I want to create a callable navigation bar so that when I need to update it, it will automatically update the navigation bar for all pages

General
1

I currently have a site where I want to create a navigation bar where when I add a page to the nav bar, it will automatically add it to all pages that I have currently uploaded to my site.

I currently have a script for a “Back to Top” button as well as a script for a responsive navigation bar. I’m now looking to add a script that will load the nav bar from another HTML page that contains my actual nav bar. But for some reason, even after adding the script, the nav bar isn’t loading for some reason.

Below is my main index.html page that contains all the scripts:

<!doctype html>
<html lang="en-US">
<head>
    <title>Title</title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $("#nav-placeholder").load("nav.html")
        })
    </script>
    <link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <button onclick="topFunction()" id="myBtn" title="Go to top">Back to Top</button>
    <script src = "scripts/topnav.js"></script>
    <script src = "scripts/topbutton.js"></script>
    <div id = "nav-placeholder"></div> 
    <header>
        <nav class = "topnav" id = "myTopnav">
            <h1 class = "logo">General Gaming Guides</h1>
            <a href = "javascript:void(0);" class = "icon" onclick = "myFunction()">
                <i class = "fa fa-bars"></i>
            </a>
        </nav>
    </header>
    <div class = "middle_text">
        Text here.
    </div>
</body>
</html>

And my navigation bar page called nav.html code is here:

<div>
    <ul class = "mainnav">
        <li><a href = "index.html">Home</a></li>
            <li><a href = "games.html">Games</a>
                <ul class = "gamesnav">
                    <li><a href = "lostark.html">Lost Ark</a>
                        <ul class = "subnav">
                            <li><a href = "news.html">News</a></li>
                            <li><a href = "patch_notes.html">Patch Notes</a></li>
                            <li><a href = "beginner_guide.html">Beginner's Guide</a>
                                <ul class = "subnav2">
                                    <li><a href = "character_info.html">Understanding Game Design</a></li>
                                    <li><a href = "road_to_50.html">Road to Level 50</a></li>
                                </ul>
                            </li>
                            <li><a href = "dailies.html">Dailies</a></li>
                            <li><a href = "weeklies.html">Weeklies</a></li>
                            <li><a href = "current-events.html">Current Events</a></li>
                            <li><a href = "abyssaldungeons.html">Abyssal Dungeons</a></li>
                            <li><a href = "legionraids.html">Legion Raids</a>
                                <ul class = "subnav2">
                                    <li><a href = "valtan-gate-1-guide.html">Normal Mode</a></li>
                                    <li><a href="valtan-hell-gate-1.html">Inferno/Extreme Mode</a></li>
                                </ul>
                            </li>
                            <li><a href = "kazerosraids.html">Kazeros Raids</a></li>
                            <li><a href = "adventure_islands.html">Adventure Islands</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        <li><a href = "about.html">About</a></li>
        <li><a href = "support.html">Support</a></li>
    </ul>
</div>

Any help to get it to show would be appreciated!

2

You’re close! The setup you’ve described — using jQuery’s .load() to insert a shared navigation bar from an external HTML file — should work, but here are a few common reasons why it might not be loading and how to fix them:

1. Ensure the nav.html file is in the correct location

If your index.html is in the root directory, make sure nav.html is also there.
Otherwise, update the path in:

$("#nav-placeholder").load("nav.html")

For example:

  • If nav.html is in a folder like /partials, then use:
$("#nav-placeholder").load("partials/nav.html")

2. Check that you’re running the site from a server (not directly from file://)

jQuery.load() requires your site to be served via HTTP(S) — not opened as a local file in the browser (like file:///C:/...).

How to fix:
Use a local development server:

  • If you have Python installed:
python -m http.server

Then go to http://localhost:8000/ in your browser.

3. Move #nav-placeholder above any <header> or existing <nav> elements

You’re currently adding #nav-placeholder, but then also defining a full <nav> bar in the <header> below it. That may create a conflict or override.

Recommendation:
Remove the manual <header>/<nav> below, and let nav.html take care of the full nav. Like this:

<body>
    <button onclick="topFunction()" id="myBtn" title="Go to top">Back to Top</button>
    <script src="scripts/topnav.js"></script>
    <script src="scripts/topbutton.js"></script>

    <!-- Load nav.html here -->
    <div id="nav-placeholder"></div>

    <!-- REMOVE this ↓↓↓ -->
    <!--
    <header>
        <nav class="topnav" id="myTopnav">
            <h1 class="logo">General Gaming Guides</h1>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </nav>
    </header>
    -->

    <div class="middle_text">
        Text here.
    </div>
</body>

4. Add error handling to check if load() fails

Modify your load() call to this:

$("#nav-placeholder").load("nav.html", function(response, status, xhr) {
  if (status === "error") {
    console.log("Error loading nav:", xhr.status, xhr.statusText);
  }
});

This will print a clear error in the browser console if the file couldn’t be loaded.

5. Make sure nav.html contains only valid HTML (no <html>, <body>, etc.)

It looks good from your snippet — just ensure the content inside nav.html is a partial, like only the <ul>...</ul> or a wrapped <nav>...</nav> block. You already have:

<div>
  <ul class="mainnav">...</ul>
</div>

You may want to replace that outer <div> with <nav> if it represents the full navbar.

Final Tip

Once fixed, your setup will make it easy to reuse the same navbar across all pages just by including this:

<div id="nav-placeholder"></div>
<script>
  $(function() {
    $("#nav-placeholder").load("nav.html")
  });
</script>