Doesn't display navbar

Report · May 10, 2022

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

Report · 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.

Report · May 15, 2022

Thank you for your helping.

I started studying with the new version of adobe classroom.

Report · 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.

Report · May 15, 2022

Thank you for your helping.

I started studying with the new version of adobe classroom.

Report · 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 & Moderator

Report · May 15, 2022

Hello Nancy!

Thanks a lot for your helping.

I started studying with the new version of adobe classroom.

Report · 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 & Moderator

Report · May 17, 2022

Thank you for your kind reply.

I am a beginner just starting to learn Dreamweaver.

I am going to study with happy.

Have a nice week.

Report · May 18, 2022

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

Report · May 18, 2022

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 & Moderator