Inspiring

Answered

Bootstrap navbar in template not working on other html pages

Forum|Forum|4 years ago
May 29, 2021
2 replies
17442 views

Hi, I am having a lot of trouble getting a navbar that works on all pages. I can get it to work on a template.php file but when i apply this to any other page (even a blank one with nothing else on it). The navbar shows up correctly with all the css and all the other associated files show up on the page menu (jquery-3.4.1.min.js, popper.min.js, bootstrap-4.4.1.js - the nav-link active work, but none of the drop downs work. I have tried uploading it to my server with associated files and it doesn't work 'live' either. How can I make one navbar that works on all pages?

This topic has been closed for replies.

Correct answer Weat01

Have you defined your project folder at the outset of your project so Dreamweaver knows where to store/save the files?

I say this because your code at the url link you supplied is littered with errors. The links on the remote server point to your local hard drive:

 <script src="file:///Macintosh HD/Users/Marta/Documents/MyDocuments/NewQuodvult/js/jquery-3.4.1.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="file:///Macintosh HD/Users/Marta/Documents/MyDocuments/NewQuodvult/js/popper.min.js"></script>
  <script src="file:///Macintosh HD/Users/Marta/Documents/MyDocuments/NewQuodvult/js/bootstrap-4.4.1.js"></script>

You have multiple links to the default Bootstrap css file:

 <!-- Bootstrap -->
    <link href="bootstrap-4.4.1.css" rel="stylesheet">
    <link href="bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    <!-- Bootstrap -->
    <link href="bootstrap-4.4.1.css" rel="stylesheet">
   
    <style type="text/css">
     url("bootstrap-4.4.1.css");
    </style>
  <!-- Bootstrap -->
    <link href="Templates/bootstrap-4.4.1.css" rel="stylesheet">
    <link href="Templates/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
    <link href="/public_html/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
  </head>

Your scripts are still pointing to your Templates folder:

 <script src="Templates/js/jquery-3.4.1.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="Templates/js/popper.min.js"></script>
    <script src="Templates/js/bootstrap-4.4.1.js"></script>

Thank you for this! I had set my Site Manage to the document root and very time I moved the Template or did live preview, it messed up the links. I set it to Site Root now and the links are cleaned up, and script files are in the right place. It now works, with Template still in Template folder. 🙂

O

osgood_

Legend

That's because your javascript file, which controls the dropdowns, has somehow found its way into the 'Templates' folder according to your script links and nothing should be in that folder apart from .dwt files.

This file below on the server is not found (it gives a 404 error).

I have zero idea about working with DW templates as it's a workflow which went out with the dinosaurs in my opinion but I can spot that the set up is not incorrect, so won't work as expected. If you can work with php files its much better to use ssi - server side includes.

W

Weat01Author

Inspiring

Hi, thank you for this - all the pages are now working perfectly in live previous mode! ... but unfortunately not on the remote 😞 - i have made sure that the script files are in the same folder as the root folder for all the files, and tried putting the template in both the Template folder and the root folder but that doesn't seem to do the trick. Do I need to change something in htaccess?

O

osgood_

Legend

Have you defined your project folder at the outset of your project so Dreamweaver knows where to store/save the files?

I say this because your code at the url link you supplied is littered with errors. The links on the remote server point to your local hard drive:

 <script src="file:///Macintosh HD/Users/Marta/Documents/MyDocuments/NewQuodvult/js/jquery-3.4.1.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="file:///Macintosh HD/Users/Marta/Documents/MyDocuments/NewQuodvult/js/popper.min.js"></script>
  <script src="file:///Macintosh HD/Users/Marta/Documents/MyDocuments/NewQuodvult/js/bootstrap-4.4.1.js"></script>

You have multiple links to the default Bootstrap css file:

 <!-- Bootstrap -->
    <link href="bootstrap-4.4.1.css" rel="stylesheet">
    <link href="bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    <!-- Bootstrap -->
    <link href="bootstrap-4.4.1.css" rel="stylesheet">
   
    <style type="text/css">
     url("bootstrap-4.4.1.css");
    </style>
  <!-- Bootstrap -->
    <link href="Templates/bootstrap-4.4.1.css" rel="stylesheet">
    <link href="Templates/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
    <link href="/public_html/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
  </head>

Your scripts are still pointing to your Templates folder:

 <script src="Templates/js/jquery-3.4.1.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="Templates/js/popper.min.js"></script>
    <script src="Templates/js/bootstrap-4.4.1.js"></script>

W

Weat01Author

Inspiring

Hi, I am having a lot of trouble getting a navbar that works on all pages. I can get it to work on a template.php file but when i apply this to any other page (even a blank one with nothing else on it) it does not work. The navbar shows up correctly with all the css and all the other associated files show up on the page menu (jquery-3.4.1.min.js, popper.min.js, bootstrap-4.4.1.js) and the 'nav-link active' work to link to the right page, but none of the drop downs work. I have tried uploading it to my server with associated files and it doesn't work 'live' either. How can I make one navbar that works on all pages?

BenPleysier

Community Expert

The answer is in the code. If you want input from us, then show us the code, preferrably by giving us a link to the site.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

W

Weat01Author

Inspiring

Hi, many thanks - it is quodvultdeus.com

I literally just inserted the nav bar component from the insert menu, duplicated dropdown items and pointed to files to set up the links.

Here is the code from the QVTemplate

lateBeginEditable name="head" -->

<style type="text/css">
@1552174 url("../bootstrap-4.4.1.css");
</style>
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
</head>

<body style="padding-top: 70px">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="../index.html">QUODVULTDEUS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="../index.html">Home <span class="sr-only">(current)</span></a> </li>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 11-14yrs </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="../KS3_Xianity.html">Life of Jesus</a> <a class="dropdown-item" href="../KS3_LifeChurch.html">Life of Church</a><a class="dropdown-item" href="../KS3_OtherFaiths.html">Other Faiths</a><a class="dropdown-item" href="../KS3_Philo.html">Philosophy</a>

</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> GCSE Eduqas </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="../KS4_EduqasGCSE.html">Resources</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../KS4_ExamRevision.html">Revision</a></div>
</li>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> A Level Eduqas </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="../KS5_Christianity.html">A2 Christianity</a> <a class="dropdown-item" href="../KS5_Philo.html">A2 Philosophy</a><a class="dropdown-item" href="../KS5_Ethics.html">A2 Ethics</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../KS5_GeneralRE.html">General RE</a></div>

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> More </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Reading Resources</a> <a class="dropdown-item" href="#">AQA GCSE Old</a>
<div class="dropdown-divider"></div><a class="dropdown-item" href="../Contact.html">Contact</a></div>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Go!</button>
</form>
</div>
</nav>
EditContent
<hr>
<div class="row">
<div class="text-center col-lg-6 offset-lg-3">
<h4> </h4>
<p>Copyright © 2021 · All Rights Reserved · Quodvultdeus.com</p>
</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap-4.4.1.js"></script>
</body>

</html>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded