How can I have the nav bar on every page of a website? It is simply not working for me

Question

can someone please help me get the nav bar on any page i tried every mehotd but none of them work here is the nav bar

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
        
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>

</head>
<div class="navbar">
    <a class="active" href="home.html"> Home </a>
    <a href="about.html">About</a>
    <a href="start">Start</a>
    <a href="blog">Blog</a>
    <div class="dropdown">
        <button class="dropbutton"> Interests</button>
        <div class="dropdown-content">
                <a href="finance">Finance</a>
                <a href="music">Music</a>
                <a href="language">Language</a>
                <a href="math">Math</a>
        </div>
    </div>

    <div class="search-container">
    <input type="text" placeholder="Search...">
    <button type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
    </div>

</div>
</html>
<!-- https://stackoverflow.com/questions/31954089/how-can-i-reuse-a-navigation-bar-on-multiple-pages -->

this SHOULD work but it comes up as blank. Very annoying

<!DOCTYPE html>
<html>

    <div id="nav-placeholder"> </div>

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


</html>

sorry the first file is called "navbar.html"

Open the developer tools in your browser. Look at the console. Read the error messages. — Quentin, Mar 11 '23 at 23:07
Your main document doesn't include jQuery so `$` will be undefined as it will error. (Meanwhile, the document which has your nav bar in it *also* has a bunch of stuff which isn't allowed inside the `
` where you are trying to put it. — Quentin, Mar 11 '23 at 23:08
@Quentin thats whats causing the problem though. What do you mean by not allowed though? So my nav bar is too complex for it to be put onto every page easily? Is it the drop down? Search bar? — user832075, Mar 11 '23 at 23:47
For example, `` is only allowed in the `` and not inside a `<div>`.</div> — Quentin, Mar 11 '23 at 23:48
I wasn't paying enough attention. `` is only allowed as a child of ``, not of `
` and `` is required to have a ``. — Quentin, Mar 12 '23 at 09:53
Hello, where do I have head as a child of div? My head gets closed before the div starts. Thank you — user832075, Mar 12 '23 at 12:26
@user832075 — When you have `$("#nav-placeholder").load("navbar.html")` which says "Place the content of navbar.html inside this div". — Quentin, Mar 13 '23 at 10:04

aabdulahad · Accepted Answer · 2023-03-12T00:04:07.163

Try this, I have rearranged your code.
The key is that you need only to include the navbar div in the external file and then call the .load jQuery function once the DOM is ready so that the data can be inserted. Be aware that this will result in an additional call to the server each time a page is loaded.
Alternative ways include using a static site bundler so that this is performed during the build stage or to use a framework such as React, Vue, etc, however this may be overkill depending on your overall use-case.

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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("navbar.html")
    })
  </script>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="nav-placeholder"></div>
</body>
</html>

navbar.html

<div class="navbar">
  <a class="active" href="home.html"> Home </a>
  <a href="about.html">About</a>
  <a href="start">Start</a>
  <a href="blog">Blog</a>
  <div class="dropdown">
    <button class="dropbutton">Interests</button>
    <div class="dropdown-content">
      <a href="finance">Finance</a>
      <a href="music">Music</a>
      <a href="language">Language</a>
      <a href="math">Math</a>
    </div>
  </div>
  <div class="search-container">
    <input type="text" placeholder="Search...">
    <button type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
  </div>
</div>

Code Sandbox Link - since there is no styles.css the CSS is wrong but once your include that it should be formatted correctly.

Edit - changed HTML

Thank you so much. So it was because I was only supposed to include the div part. Adn keep the search bar seperate?... SO its not possible to include the search bar as part of the nav bar? — user832075, Mar 12 '23 at 00:00
You can only include valid HTML to be part of the navbar, see the comment that Quentin made on your post. You need to call the .load function when the DOM loads otherwise the div that you want the navbar to be in doesn't exist on page load. I will update my post to add the search bar to be automatically included. — aabdulahad, Mar 12 '23 at 00:02

How can I have the nav bar on every page of a website? It is simply not working for me

1 Answers1