Bootstrap navbar in template not working on other html pages

Report · May 28, 2021

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?

Report · May 28, 2021

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?

Report · May 29, 2021

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!

Report · May 29, 2021

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">
@Import 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>

Report · May 29, 2021

For the moment, I have found

1. In the template there are two links to Bootstrap CSS. There should be just one link

   <!-- TemplateEndEditable -->
    <!-- Bootstrap -->
    <link href="bootstrap-4.4.1.css" rel="stylesheet">
    <link href="/public_html/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">

.2. When I look at the home page, I see that it is not a child of the template file.

This is the closest article that I could find to hrlp you out:

http://www.digitalfamily.com/tutorials/creating-websites-with-dreamweaver-html-templates-dwt/.

Amazing that I could not find any related matter on the Adobe site. A hint?

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

Report · May 29, 2021

Hi @Weat01,

@Import url("../bootstrap-4.4.1.css"); ???????

As @osgood_ said, Template.dwt files belong in your local site's Templates folder. But all other files should be stored at site root level or in their own folders, separate from Templates.

Don't use @import for the main CSS files. Instead just use a straight link like this where Bootstrap is saved to your css folder.

<link href="../css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">

Finally, using Bootstrap in your Template has a few downsides because many Template features only work in Design view. But Bootstrap expects you to be in Live view. So you have to do much switching between Live & Design (Ctrl + Shift + F11) during development.

For this and other reasons, I much prefer Server-Side Includes over DW's proprietary template system. SSI's are way more efficient and flexible enough for 5 to 5,000 page websites. And since you're already using PHP code, there's no reason not to use php includes for your sitewide navigation. See link below for more details.

https://alt-web.blogspot.com/2015/07/server-side-includes-with-php.html

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 29, 2021

thanks...just got back to grips with DW after a long time, server side includes seem like another hurdle to get round when I was hoping the template route might be a simple solution...one day..!

Report · May 29, 2021

PS Thanks for the link to the great php page tutorial, actually not too hard!

Report · May 29, 2021

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.

Report · May 29, 2021

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?

Report · May 29, 2021

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>

Report · May 30, 2021

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. 🙂

Report · May 30, 2021

If your site is properly defined, you should NEVER move your Template from the Templates folder. Doing so will break your site.

Nancy O'Shea— Product User, Community Expert & Moderator

Bootstrap navbar in template not working on other html pages

1 Correct answer

Photos