Skip to main content
A
Alfred23830680d5ea
Known Participant
May 6, 2023
Answered

Copying navigation bar to other pages

  • May 6, 2023
  • 4 replies
  • 7644 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!


    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.

     

    4 replies

    O
    osgood_
    Legend
    May 7, 2023

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

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

    O
    osgood_
    Legend
    May 7, 2023
    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.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    May 7, 2023

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

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    May 7, 2023
    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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 6, 2023

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

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

    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    May 6, 2023

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices