• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Bootstrap navbar in template not working on other html pages

Explorer ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

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?

Views

7.7K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Explorer , May 30, 2021 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. 🙂

Votes

Translate

Translate
Explorer ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

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, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

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" -->
<!-- TemplateEndEditable -->
<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>
<!-- TemplateBeginEditable name="EditContent" -->EditContent<!-- TemplateEndEditable -->
<hr>
<div class="row">
<div class="text-center col-lg-6 offset-lg-3">
<h4>&nbsp;</h4>
<p>Copyright &copy; 2021 &middot; All Rights Reserved &middot; 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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

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, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

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

 

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

 

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

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?  

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

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>

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

LATEST

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines