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

Copying navigation bar to other pages

Community Beginner ,
May 06, 2023 May 06, 2023

Copy link to clipboard

Copied

I've made a new navigation bar on one of my web pages (replacing the outdated Spry versions).  How do I copy it to all the other pages on my site?  I've spent hours trying to find this information but without success.

A.G.

Views

5.5K

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

Community Expert , May 07, 2023 May 07, 2023
quote

I see that I need first to make a css style sheet

By @Alfred23830680d5ea

===========

  1. Go to File > New > CSS file.  Hit Create button.
  2. Paste or manually add styles to your CSS file and SaveAs top_nav.css. 
  3. Save stylesheets to a Styles or CSS folder in your local site.
  4. Open your HTML page in Code view.
  5. Scroll to the <head> tag of your document.
  6. Go to Tools > CSS > Attach Stylesheet.  Select top_nav.css.  Save & close.
  7. Repeat steps 4-6 in other HTML pages.

 

Votes

Translate

Translate
Community Expert ,
May 06, 2023 May 06, 2023

Copy link to clipboard

Copied

If you are using templates, you can put it into your template. If you are using includes you could also put the menu into your includes so that it shows on all pages. Short of templates or includes you would have to manually put the code on all pages and adjust the links accordingly per page.

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 06, 2023 May 06, 2023

Copy link to clipboard

Copied

It all depends on how your site was built.

 

Server-Side Includes with PHP Files:

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

Place your navigation menu inside an include file called top_nav.html and save it to a folder called Includes. 

 

Add a PHP include statement to each of your PHP site pages.  It should be where the navigation element will appear.

<?php require_once('Includes/top_nav.html'); ?>

 

If you ever decide to change your navigation,  open top_nav.html, make changes, save and upload file to your server.   Done.   All the magic happens on the server.  SSIs are the most efficient way to manage sitewide elements like common headers, footers and navigation.

 

Dreamweaver Proprietary Templates (.dwt files):

https://helpx.adobe.com/dreamweaver/using/dreamweaver-templates.html

Use a sitewide template to create your site.  Your main template.dwt will contain common headers, footers and navigation.  Add Editable Regions for page specific content.  Save template and close it.

 

Spawn child pages from your Template.  File > New > Site template... Chose your .dwt file and hit Create button.  Repeat for other site pages.   Add page specific content.  Save and upload all child pages to your server. 

 

Dreamweaver Proprietary Library files:

https://helpx.adobe.com/dreamweaver/using/library-items.html

Libary items can contain your navigation menu HTML code.  However LIs cannot be inserted anywhere except within the <body> tag of your site pages.  For this reason, I never use Library Items.  Server side includes are better. 🙂

 

Hope that helps.  Post back if you have any questions.

 

 

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
Community Beginner ,
May 06, 2023 May 06, 2023

Copy link to clipboard

Copied

Thanks to both of you.  I'll give it a try!

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 06, 2023 May 06, 2023

Copy link to clipboard

Copied

If the site is a static HTML-site, then the best solution is to create a custom element as in https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements

 

You could also use Bing or YouTube to search for `custom elements`.

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
LEGEND ,
May 07, 2023 May 07, 2023

Copy link to clipboard

Copied

quote

If the site is a static HTML-site, then the best solution is to create a custom element as in https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements

 

You could also use Bing or YouTube to search for `custom elements`.


By @BenPleysier

 

Did javascript web-components ever take off or were they just considered overkill because of the shadow dom complexity workflow. I think that lessened their usefulness and deployment, too complicated a solution for most to consider, maybe.

 

NOT surprisingly in the latest version of next.js you can combine client-side and server-side code all in one file if you want to. All the javascript kiddies are excited by this seemingly new introduction to them.............humm php has been doing that to good effect for 20+years. Strange how it eventually goes full circle. Seems that there is hope on the horizon and eventually light of day appears when it should have happened years ago to make usage more attractive and simpler not more difficult and obtuse.

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 07, 2023 May 07, 2023

Copy link to clipboard

Copied

quote

Did javascript web-components ever take off or were they just considered overkill because of the shadow dom complexity workflow. I think that lessened their usefulness and deployment, too complicated a solution for most to consider, maybe.


By @osgood_

 

I am sorry, but you have lost me. Let me explain what I mean in very simple terms.

 

I have a JavaScript file called custom.js. The code inside the file is

class Heading extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `
            <header class="bg-light">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                                <a class="navbar-brand ms-auto" href="#">Navbar</a>
                                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" id="navbar1_collapse">
                                    <div class="navbar-nav">
                                        <a class="nav-item nav-link active" href="#">Home</a>
                                        <a class="nav-item nav-link" href="#">About</a>
                                        <a class="nav-item nav-link" href="#">Contact</a>
                                    </div>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </header>
        >`;
    }
}

customElements.define('my-heading', Heading);

The HTML code that follows this.innerHTML = ` is the code that would normally represent a header in a document. Due to the fact that I have created a custom element, all I need to do is to attach the JavaScript file to the document and add our custom element as in

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Custom Elements</title>

    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css">
</head>

<body>
    <my-heading></my-heading>

    <script src="js/custom.js"></script>
</body>

</html>

 

In other words, these two lines need to be added to each document:

    <my-heading></my-heading>
    <script src="js/custom.js"></script>

 

Where is the complication? Where is the shadow DOM?

 

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
LEGEND ,
May 07, 2023 May 07, 2023

Copy link to clipboard

Copied

The shadow dom and shadow root is clearly mentioned in the link you provided, right, so it must form some integral part of creating web components,  l assume?

 

What your showing is no more really than:

 

const navLinks = `
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li>Link For</li>
</ul>
`
const nav = document.querySelectorAll('nav');
nav.forEach(function(nav) {
nav.innerHTML = navLinks;
});

 

 

I gave up on web-components because it got too complicated in terms of understanding/writing to the shadow dom, shadow root. I think youre supposed to be able to pass different information through to the same component which makes it more flexible.

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 07, 2023 May 07, 2023

Copy link to clipboard

Copied

It can be more complicated making it a great tool for those who have an understanding of Web Components.

 

But for an alternative to serverside includes, the simple form can be used.

 

 

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
LEGEND ,
May 07, 2023 May 07, 2023

Copy link to clipboard

Copied

quote

It can be more complicated making it a great tool for those who have an understanding of Web Components.

 

But for an alternative to serverside includes, the simple form can be used.

 


By @BenPleysier

 

Fair enough, I just thought using a simple normal everyday variable to contain the html and then inserting that into the element you need to using innerHTML is maybe a more simple/mainstream approach than using class extends HTMLElement/customElements.define. Both do the jobbie so I guess its what ever floats your boat and lets face it web-components only get complex IF you require to take it a step further. 

 

Also I think web-components fell out of favour a bit because so many developers use frameworks to create flexible components and they do it a lot simpler (behind the scenes) than using vanilla javascript shadow dom approach, one tick for them I guess, but then they overcomplicate other stuff that can be done easier in vanilla javascript. Swings and roundabouts.

 

OP has options now, so let's hope they might be able to put one of them to good use. I'd forget php includes, unless you have a server environment set up, and use one of the javascript approaches. Not a big fan of DW templates or library items myself.

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 07, 2023 May 07, 2023

Copy link to clipboard

Copied

How many pages do you need to update. If its a few pages then you could just copy and paste BUT that means everytime you update the navigation you have to copy and paste to every page again, so that solution is not economical for more than a few pages.

 

If you're using Dreamweaver best bet would be to use a library item or template but in my opinion they can sometimes eventually give you grief.

 

No doubt the best solution is to use some kind of include file (a single generic file which is included in each of your pages) either using a server side language like php (a local server is required which runs the server-side langauge) or you could just use javascript (no local server is required as the browser runs javascript by default). Include files offer a solid and stable way forward as you only update one file and the information in that file then propagates to each page which that file is included in.

 

You've been provided with some good information from others in this thread. See what you can do. Check back if you require any additional help.

 

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 Beginner ,
May 07, 2023 May 07, 2023

Copy link to clipboard

Copied

Thank you.  

My web site currently has 42 pages that need the navigation bar.  The site has no animation and no links to video.

 

What I'm doing is updating a site in Dreamweaver 2022 that I originally created and maintained in Dreamweaver CS3, which used a Spry template for the navigation bar.  This worked well in CS3 but not so well in DW2022.  I understand that Spry is obsolete.  

 

I'll try tomorrow to act on the helpful suggestions I've been given in this discussion group.  I should add that I'm surprised to find that adding a navigation bar to pages is so complicated and that there's so little info about how to do it readily available on the internet.  

 

By the way, when, after creating a nav bar in DW2022, I copied and pasted the code into other pages, the bar appeared but none of the formatting came with it.  But I have a very limited understanding of code (to say the least!).

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 07, 2023 May 07, 2023

Copy link to clipboard

Copied

quote

I'll try tomorrow to act on the helpful suggestions I've been given in this discussion group.  I should add that I'm surprised to find that adding a navigation bar to pages is so complicated and that there's so little info about how to do it readily available on the internet.  

 

By the way, when, after creating a nav bar in DW2022, I copied and pasted the code into other pages, the bar appeared but none of the formatting came with it.  But I have a very limited understanding of code (to say the least!).


By @Alfred23830680d5ea

 

Id try either the solution that Ben or myself have provided which uses javascript, thats the simplest/most stable I think.

 

It sounds like you did not have the css linked to the pages that you were copying the navigation into. That would cause lose of formating. With 42 pages you need to set up a workflow which makes life easy should you need to update the navigation in the future. Once you have generic link/s to your navigation html and css code in all the files it will be as simple as updating one file.

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 Beginner ,
May 07, 2023 May 07, 2023

Copy link to clipboard

Copied

I can't get this to work.  I've created a successful nav bar in one page, carefully following the step-by-step instructions of an online tutorial.  When I add this bar to my Library as an object, then insert it into another page, it appears as an ordered list without styles or links.  The Adobe instructions warn that this might happen.  If I'm reading the Adobe instructions for making a Template correctly, the Template stores the entire page, not just an element.  It seems useful only in building a new web site from scratch.

 

Is there a way to copy and paste the styles and formatting of the navigation bar so it doesn't reproduce just as an unformatted unordered list with bullet points?

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 07, 2023 May 07, 2023

Copy link to clipboard

Copied

quote

I can't get this to work.  I've created a successful nav bar in one page


By @Alfred23830680d5ea

 

How have you styled the nav bar in the page that works? Do you have a css stylesheet attached to the page where the css styling is?

 

This is how I would probably go about doing what you want, in javascript -

 

Create a file in your website folder named  - globalNavigation.js

 

In the globalNavigation.js file assign your navigation html to a javascript variable:

 

 

 

const globalNavigation =  `

<!--- Paste your navigation html code here -->

`
const navigation = document.querySelector('.navigation');
navigation.innerHTML = globalNavigation;

 

 

 

In the page/s where you want your navigation to appear add a <div> with the class name of  - navigation:

 

<div class="navigation"></div>

 

Add a link to your globalNavigation.js file at the bottom of each page, directly before the closing </body> tag:

 

<script src="globalNavigation.js"></script>

</body>

 

That should be it, assuming the css styles, which controls the formatting and presentation for the navigation, are in a linked css stylesheet which is present in ALL your 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 Beginner ,
May 07, 2023 May 07, 2023

Copy link to clipboard

Copied

Thank you.  I see that I need first to make a css style sheet (I assume it's the same as a css folder) and link it to all my pages.  I'll do this and go from there.  I think I'm on my way of getting a Dreamweaver education!

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 07, 2023 May 07, 2023

Copy link to clipboard

Copied

quote

Thank you.  I see that I need first to make a css style sheet (I assume it's the same as a css folder) and link it to all my pages.  I'll do this and go from there.  I think I'm on my way of getting a Dreamweaver education!


By @Alfred23830680d5ea

 

A css folder is a folder and a css stylesheet is a css file, which you can keep in the css folder. Then add link to the css stylesheet in each of your 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 Beginner ,
May 07, 2023 May 07, 2023

Copy link to clipboard

Copied

Many thanks for clarifying this.

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 07, 2023 May 07, 2023

Copy link to clipboard

Copied

quote

I see that I need first to make a css style sheet

By @Alfred23830680d5ea

===========

  1. Go to File > New > CSS file.  Hit Create button.
  2. Paste or manually add styles to your CSS file and SaveAs top_nav.css. 
  3. Save stylesheets to a Styles or CSS folder in your local site.
  4. Open your HTML page in Code view.
  5. Scroll to the <head> tag of your document.
  6. Go to Tools > CSS > Attach Stylesheet.  Select top_nav.css.  Save & close.
  7. Repeat steps 4-6 in other HTML pages.

 

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
Community Beginner ,
May 07, 2023 May 07, 2023

Copy link to clipboard

Copied

Thank you for this detailed and helpful info!

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 Beginner ,
May 07, 2023 May 07, 2023

Copy link to clipboard

Copied

PROGRESS!  But I'm not counting my chickens quite yet.  Stay tuned!

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 07, 2023 May 07, 2023

Copy link to clipboard

Copied

Be warned when using Dreamweaver proprietary software, it cannot be used outside of Dreamweaver.

 

My suggestion is shown in the video:

https://youtu.be/18AIl3yelok

 

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 Beginner ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

The problem is solved!  I've succeeded in making a new navigation bar and placing it in all of my web pages.  Many, many thanks to all of you for your expertise, generosity, and patience.  I've learned a lot in the process.

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 Beginner ,
May 14, 2023 May 14, 2023

Copy link to clipboard

Copied

LATEST

Hard to mark a single "correct answer," since parts of what many of you wrote were helpful to my particular situation and teaching me how to go about fixing what wasn't working!

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