a href Help...?

[RADaugherty]

So I have a universal Navigation bar that I include on all my pages to navigate ect... but I'm having a lot of issues with what happens after I navigate to a page that's in a sub folder.

 

      <script>
         $(document).ready(function(){
            $('#header').load("navbar.html");
         });
      </script>

 

This is how I include the navbar in each of the pages.

 

Here is how I THINK the Navbar should be setup (All pages work fine except for the bottom 3, which are in a sub folder called BMSCalendar

 

<div class="navbar">
  <a href="index.php">Dashboard</a>
  <div class="dropdown">
    <button class="dropbtn">Assignments
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="workassignments.php">Work Assignments</a>
      <a href="officeassignments.php">Office Assignments</a>
    </div>
  </div>

    <div class="dropdown">
    <button class="dropbtn">Fleet Management
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="loanerOverview.php">Loaner Fleet</a>
      <a href="stockOverview.php">Stock Fleet</a>
      <a href="tmmiOverview.php">TMMI Fleet</a>
      <a href="equipmentOverview.php">Equipment Shipping</a>
    </div>
  </div>
  <a href="attentionbatteries.php">Discharge Batteries</a>
    <a href="ViewInventory.php">Inventory Viewer</a>
    <div class="dropdown">
    <button class="dropbtn">Schedule
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="/BMSCalendar/Calendar.php">Work Schedule</a>
      <a href="/BMSCalendar/index.php">Board Schedule</a>
            <a href="/BMSCalendar/searchSchedule.php">Search Schedule</a>
    </div>
  </div>
</div> 

 

So the website is www.xxxxxxxx.net/TestDash/index.php

 

When I am on index and I navigate to any of the pages in that dir everything works 100% fine. Now if I go to the Schedule section and select one it fails and the address is www.xxxxxxxx.net/BMSCalendar/Calendar.php instead of www.xxxxxxxx.net/TestDash/BMSCalendar/Calendar.php

 

Now if I change it to:

 

<a href="../TestDash/BMSCalendar/searchSchedule.php">Search Schedule</a>

 

It works but then if I try and navitage to any of the other pre-existing pages (Index ect.) that worked, it fails and the address now is:

 

https://www.xxxxxxxx.net/TestDash/BMSCalendar/index.php

 

Haaaaaaaaaaaaalp! I assume I'm just misunderstanding how a href works but I'm not sure

[requinix]

Just writing "navbar.html" is a relative URL which means that where the URL actually goes depends on what page you're using it in. It'll always be in the current "directory", so to speak. And whether that URL is in a link or a stylesheet or some Javascript doesn't matter because they all work the same way.

"../navbar.html" is also relative, except it means "go up a directory and then look for navbar.html".

What you want is an absolute URL. It starts with a slash and always starts from the root of your website: "/navbar.html". Which isn't the right path, of course - apparently you need "/TestDash/navbar.html".