Skip to main content
E
ezfinder
Participating Frequently
May 11, 2022
Question

Doesn't display navbar

  • May 11, 2022
  • 4 replies
  • 390 views

Dosen't display contents of the navbar  after inserting new class name (process No.4) in lesson 11 of classroom in a book 2017 as follow the picture...

Can I solve this?

My dreamweaver version is the latest 21.2

    This topic has been closed for replies.

    4 replies

    E
    ezfinderAuthor
    Participating Frequently
    May 18, 2022

    Solved problem...I bought a new ebook  2022.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 18, 2022
    quote

    Solved problem...I bought a new ebook  2022.


    By @ezfinder

    =========

    You need a Windows or Mac OS to use Dreamweaver.

     

    See below for CPU & GPU requirements. Most Creative Cloud apps work on:

    • Windows 10 versions 21H2, 21H1, 20H2, 2004, and 1909 (LTSB branches are not supported;)
    • macOS 12 (Monterey), macOS 11 (Big Sur), macOS 10.16 or 10.15 (Catalina).

    https://helpx.adobe.com/creative-cloud/system-requirements.html
    https://helpx.adobe.com/dreamweaver/system-requirements.html

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 11, 2022

    You're using an outdated book.  Many things have changed since then.

     

    jQuery 1x is obsolete.  The latest version of jQuery is 3.6. 

    https://releases.jquery.com/

     

    Bootstrap 5.1 is the current release version which is very, very different from previous Bootstrap versions and does not require jQuery.  Bootstrap 5 does more with less code.

    https://getbootstrap.com/

     

    A basic Bootstrap 5 document looks like this:

     

     

    Working code:

    <!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest minified Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="d-flex flex-column min-vh-100">
<!--navbar-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
</div>
</div>
</nav><!--/nav-->

<div class="container mt-3">
<div class="row">
<div class="col-10 mx-auto">
<h3 class="mt-3">Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner. When button is tapped/clicked, navigation bar opens to reveal vertically stacked links.</p>
<hr>
<h3>Linked Image</h3>
<figure><a href="https://example.com">
<img class="img-fluid" src="https://dummyimage.com/900x300" alt="placeholder" title="Link to Example.com"></a><figcaption class="text-center">Fig. 1 Caption</figcaption>
</figure>
</div><!--/col-->
</div><!--/row-->
</div><!--/container-->

<div class="container-fluid mt-auto">
<footer class="row bg-dark text-light text-center">
<div class="col">
Footer text
</div>

<div class="col">
Footer text
</div>

<div class="col">
Footer text
</div><!--/col-->
</footer><!--/row-->
</div><!--/container-->

<!--latest minified Bootstrap JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
      E
      ezfinderAuthor
      Participating Frequently
      May 16, 2022

      Hello Nancy!

      Thanks a lot for your helping.

      I started studying with the new version of adobe classroom.

       

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      May 16, 2022

      I highly recommend learning to work with code.  It will make DW much easier to pick-up and start using immediately.  Code View with auto-code completion and code hints is much faster than clumsy panels.


      Read the chapters, do code exercises and take quizzes at the end.
      - https://www.w3schools.com/html/
      - https://www.w3schools.com/css/
      - https://www.w3schools.com/js/
      - - https://www.w3schools.com/bootstrap/

       

      Nancy O'Shea— Product User & Community Expert
        O
        osgood_
        Legend
        May 11, 2022

        In addition to what Ben M has said what version of Bootstrap are you using, version 4 Im guessing? A tutorial from early in 2017 is probably using Bootstrap version 3, so things will have probably changed in version 4. Beta version 4 was released in Aug 2017, so the tutorial may have been written before that date and I doubt a tutorial would be using a Beta version.

         

        The only sure way of getting any help is to upload your page to a remote server and provide a link to it OR paste the pages code in the forum, together with any custom css which you have used in addition to the default Bootstrap css. 

          E
          ezfinderAuthor
          Participating Frequently
          May 16, 2022

          Thank you for your helping.

          I started studying with the new version of adobe classroom.

           

          B
          Community Expert
          Ben MCommunity Expert
          Community Expert
          May 11, 2022

          First, the book is from 2017. So while the code may end up working, it might not be best practice.

           

          Also, since we don't have the book in front of us and may not be familiar with it the best thing we can do is ask for you to upload the files somewhere so that we can examine what is going on and help guide you as to what the issue might be.

            E
            ezfinderAuthor
            Participating Frequently
            May 16, 2022

            Thank you for your helping.

            I started studying with the new version of adobe classroom.

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