Bootstrap navbar dropdown list not displaying #41229

dedrickpoh · 2025-02-15T03:34:35Z

dedrickpoh
Feb 15, 2025

Hello, I have been dabbling with this for awhile and would like to seek the community's help.
In the Bootstrap v5.3 navbar dropdown implementation, the dropdown doesn't display when viewed on a full-sized window. However, when the window size is reduced (to the extent the navbar collapses), the dropdown can actually be displayed.
Would appreciate if I could get some advice on this problem.

Here's my code.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>SpendSmart</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="A1.css">
</head>

<body onload="main();">
  <h1>SpendSmart</h1>

  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown link
            </a>
            <ul class="dropdown-menu">
              <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>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div id="container">
      <div id="Add">
          <h2>ADD Expense</h2>
          <div class="form">      
          </div>

          <div>
              <p class="Addresult"></p>
          </div>    
      </div>
      <div id="Update">
          <h2>Update Expense</h2>
          <div class="form">
          </div>

          <div>
              <p class="Updateresult"></p>
          </div>    
      </div>
      <div id="Delete">
          <h2>Delete Expense</h2>
          <div class="form">

          </div>

          <div>
              <p class="Deleteresult"></p>
          </div>    
      </div>
      <div id="Display">
              <h2>Expense List</h2>
              <table >
                  <thead>
                      <tr><th>Serial Number</th><th>Title</th><th>Amount</th></tr>
                  </thead>
                  <tbody id="displayTable">
                      
                  </tbody>
              </table>
      </div>
  </div>  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <script src="A1.js"></script>
</body>
</html>

julien-deramond · 2025-02-15T12:12:09Z

julien-deramond
Feb 15, 2025
Maintainer

I've created this CodePen with your code. Looks like the "Dropdown link" is well-rendered in the navbar and is actionable (menu is displayed) both in desktop or mobile modes. Am I missing something?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Bootstrap navbar dropdown list not displaying #41229

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Bootstrap

Bootstrap navbar dropdown list not displaying #41229

dedrickpoh Feb 15, 2025

Replies: 1 comment

julien-deramond Feb 15, 2025 Maintainer

dedrickpoh
Feb 15, 2025

julien-deramond
Feb 15, 2025
Maintainer