Known Participant

Answered

Copying navigation bar to other pages

Forum|Forum|2 years ago
May 6, 2023
4 replies
7667 views

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.

This topic has been closed for replies.

Correct answer Nancy OShea

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!

I see that I need first to make a css style sheet
By @Alfred23830680d5ea

===========

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

O

osgood_

Legend

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.

A

Alfred23830680d5eaAuthor

Known Participant

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?

A

Alfred23830680d5eaAuthor

Known Participant

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:

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

</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

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!

BenPleysier

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

O

osgood_

Legend

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.

BenPleysier

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

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

A

Alfred23830680d5eaAuthor

Known Participant

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

B

Ben M

Community Expert

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.

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