Skip to main content
K
KevinB9
Inspiring
November 6, 2023
Question

dropdown menu no dropping down

  • November 6, 2023
  • 4 replies
  • 311 views

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>

    This topic has been closed for replies.

    4 replies

    K
    KevinB9Author
    Inspiring
    November 7, 2023

    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

    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    November 7, 2023

    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.

    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    November 7, 2023

    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
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 7, 2023

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

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 6, 2023

    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.

     

    Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      November 6, 2023
      quote

      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.

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