Navbar bevavior in subfolders

I have a navbar in my project and I’ve added an image in there as well as hiding some elements if I’m not logged in. the navbar works fine on the pages in the root of my site but the pages in the subfolders show the navbar but the photo and the unhidden elements don’t work.

maybe thats a similar post:

Agree with @Freddy_Blockchain, you need to be site relative links or absolute paths when working with include files and images in sub directories.

If you use document relative you will certainly land up with issues like this no matter what application you are using.

I use site root relative, which is then relative to / which is my site root.

if you navbar has an image link inside it that is linked to /images/picture.jpg then no matter where it is places or what path asks for the image it will always be found by starting at the site root of / and working it’s way up the directory structure you set.

1 Like

@psweb so you change it on your global settings? Or where is that thing again :laughing:


1 Like

ok thanx yes I remember now. Which one is „default“? Cause I guess I‘m trying mostly to use default values/settings

Default when you make a new project in Wappler is Document, i change it to site on all new projects.

1 Like

Sorry, should have mentioned that, it’s just something I do automatically when setting up a site so it’s not something i think about but yes, relative to root always for me

Mine is set for site root however I organize the pages in subfolders. I’m guessing the issue is that the pages all need to be in the root to preserver the functionality? I’m noticing it’s going away when its a page in the subfolder… the weird thing is that the links still work in the nav bar either place

1 Like

Can you paste your navbar code thats inside your include file here as well as the code you are using to call in the include.

If I make a link like this /images/picture.jpg then it will alway start by looking at the site root of / first, then look for a folder in the site root of images and then look for an image called picture.jpg inside that.

If I used that same src of images/picture.jpg inside a directory or 100 directories it would not matter because I am always telling it the start at / site root.

1 Like
  <script type="text/javascript" src="../dmxAppConnect/dmxFormatter/dmxFormatter.js"></script>
</head>
<!-- Wappler include  bootstrap4="cdn" jquery_slim_33="cdn" moment_2="cdn" is="dmx-app" id="PassNav" appconnect="local" components="{&quot;dmxFormatter&quot;:{}}"-->
<dmx-serverconnect id="GroupChecker" url="../dmxConnect/api/Data/Security/GroupChecker.php"></dmx-serverconnect>
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end sticky-top">
  <img src="../img/Site/logos/NavIcon.png">
  <a class="navbar-brand ml-auto" href="#"></a>
  <a class="navbar-brand ml-auto" href="#" dmx-html="GroupChecker.data.GroupCheck[0].Group">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbar1_collapse">
          <div class="navbar-nav">
            <a class="nav-item nav-link active" href="/index.php" id="Home">Home</a>
            <a class="nav-item nav-link" href="/Schedule.php" id="Schedule">Schedule</a>
            <div class="nav-item dropdown" id="Drivers">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="TeamsDrop" role="button" aria-haspopup="true" aria-expanded="false">Drivers</a>
              <div class="dropdown-menu" aria-labelledby="dropdown1" id="TeamsSub">
                <a class="dropdown-item" href="/Teams.php">Active Roster</a>
                <a class="dropdown-item" href="/Standings.php">Standings</a>
                <a class="dropdown-item" href="/Standings.php">History</a>
              </div>
            </div>
            <div class="nav-item dropdown" id="Info">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="ContactDropDown" role="button" aria-haspopup="true" aria-expanded="false">Info</a>
              <div class="dropdown-menu" aria-labelledby="dropdown1" id="Info">
                <a class="dropdown-item" href="/RulesAndRegister.php">Rules/Register</a>
                <a class="dropdown-item" href="/Contact.php">Contact</a>
              </div>
            </div>
            <div class="nav-item dropdown" id="TeamDropdown" dmx-show="GroupChecker.data.GroupCheck[0].Group == &quot;Admin&quot;">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="TeamHeading" role="button" aria-haspopup="true" aria-expanded="false" dmx-text="GroupChecker.data.GroupCheck[0].TeamEmail">Team Section</a>
              <div class="dropdown-menu" aria-labelledby="dropdown2">
                <a class="dropdown-item" href="/Teams/TeamsPage.php" id="TeamNews">Team news</a>
                <a class="dropdown-item" href="../Action/Success.php" id="TeamUpdate">Update my team</a>
                <a class="dropdown-item" href="../Action/Success.php" id="Schedule">Update my schedule</a>
                <a class="dropdown-item" href="/RulesAndRegister.php" id="Register">Register a new team</a>
              </div>
            </div>
            <div class="nav-item dropdown" id="AdminDropdown" dmx-show="GroupChecker.data.GroupCheck[0].Group == &quot;Admin&quot;">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="AdminDropDown" role="button" aria-haspopup="true" aria-expanded="false">Admin</a>
              <div class="dropdown-menu" aria-labelledby="dropdown3">
                <a class="dropdown-item" href="/admin/News/aNewslist.php" id="Anews">News</a>
                <a class="dropdown-item" href="/admin/Schedule/aDetailsPaged.php">Schedule</a>
                <a class="dropdown-item" href="/admin/Teams/aTeamsList.php">Teams</a>
                <a class="dropdown-item" href="/admin/Users/aUsers.php" id="Users">Users</a>
                <a class="dropdown-item" href="/admin/Tracks/Tracks.php">Tracks</a>
                <a class="dropdown-item" href="/admin/Polls/Polls.php">Polls</a>
              </div>
            </div>
            <a class="nav-item nav-link" href="/Login/login.php">Login</a>
          </div>
        </div>
      </nav>

Some of these links look like they are document relative such as the one for the dmxFormatter.js on line 1

As soon as you see something like ../ that means, relative to the directory of the document you are in, go a single folder back from it and then follow the directory structure.

I did a test on my side right now and made a new project with site relative links, then added a folder to the site and added the AppConnect Framework and I have to admit it added the link as document relative and not site relative.

I will have to ask Mr @Teodor to shed some light on this one im afraid.

I took the ."…" out of the code and it works fine. I’m not coding the … in it’s happening as I use the visual design functions. Hopefully this is my solution.

1 Like

For now yes, you should be able to remove the .. and it should make it all work perfectly.

Thanks for the help I appreciate it.

1 Like

Just testing more and it seems you may have found a
hqdefault

1 Like

Yes
/directory means from root,
../directory means from parent directory

2 Likes

I am trying to include a navbar across all pages using include, so I don’t have to keep redoing links. These pages are in various subfolders. I have tried routes, but always gives back a 2nd subfolder. ex: http://localhost/rooms/rooms instead of http://localhost/rooms. If I switch to site root, all the dynamic content breaks. Any direction would be greatly appreciated. Just trying to include a nav bar on every page and not having to change links on every page.

If the menu is used in an include across all pages, the links of its items must be relative to site root.
Example:

<div class="navbar-nav">
    <a class="nav-item nav-link active" href="/index.php">Home</a>
    <a class="nav-item nav-link" href="/mysubfolder/page.php">About</a>
    <a class="nav-item nav-link" href="/another/subfolder/page.php">Contact</a>
</div>

or if you are using routes, just select routes …