dropdown menu no dropping down

[KevinB9]

Hello.

I am trying to create a dropdown menu in Dreamweaver but it is not dropping down! Please help of you can. I am using Dreamweaver 21.3 on a MacBook Pro with OS Sonoma 14.0. From the "Bootstrap Components" tab I am inserting a "Nav Bar fixed to top". The other nav elements seem to be working OK but the dropdown menu is not showing. Here is my code below. I set up the site using the Bootstrap 4 framework so I have the popper.min.js file.  Thanks Kevin

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a> </div>
</li>
<li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

[osgood_]

I set up the site using the Bootstrap 4 framework so I have the popper.min.js file.  Thanks Kevin

By @KevinB9

Its working for me. Do you have the jquery and bootstrap js files linked? - popper.min.js wont do anything on its own.

[Nancy OShea]

Bootstrap ended support for version 4 almost a year ago. 

You should be using Bootstrap version 5 or higher.   It's actually superior to version 4.

Replace the CSS and JS scripts you have now with these from the official CDN.   No jQuery is required.

CSS	https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
JS	https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Hope that helps.

[Ben M]

The code looks fine to me. If you can upload it somewhere I suspect that you are missing includes. Although I will warn that DW and Sonoma do not play nice together so as long as you don't right click you should be able to continue developing.

[Nancy OShea]

To test drop-down menus in Live view, use Ctrl/Cmd + Click.

[KevinB9]

Hi. I am replying to my post about the dropdown not working. I solved the problem, but the solution brings up another question. 

The solution to the problem was clicking on "hide live view displays" in the View menu. Can anyone explain why the live view display (that blue line around an element) would interfere with the dropdown menu? Thanks

[Ben M]

Those features are designed to help with editing in live view. Because you are trying to test functionality it could be interfering with the functionality.

[Nancy OShea]

Best to test site performance in real browsers and mobile devices as that's what matters.

Dreamweaver is just an editor, not an actual browser.