Why is my Bootstrap 5 navbar dropdown invisible?-CodePudding

I have the correct code and I'm using the correct CSS and JS links in the HEAD. I cannot fathom why this dropdown is not working. The downwards arrow renders but nothing happens when the user clicks.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<nav >
  <div >

    <a  href="index.html"><img src="https://via.placeholder.com/200" alt="Largs Model Boat Club Logo" style="width:200px;"></a>
    <h1 >Largs Model Boat Club</h1>

    <div  id="navbartogg">
      <ul >
        <li >
          <a  href="gallery.html">Gallery</a>
        </li>
        <li >
          <a  data-bs-toggle="dropdown" href="news_uc.html">News & Events</a>
          <ul >
            <li><a  href="#">Link 1</a></li>
            <li><a  href="#">Link 2</a></li>
            <li><a  href="#">Link 3</a></li>
          </ul>
        </li>
        <li >
          <a  href="aboutlargs_uc.html">About Largs</a>
        </li>
        <li >
          <a  href="contactus.html">Contact Us</a>
        </li>
        <li >
          <a  href="index.html">Home</a>
        </li>
      </ul>
    </div>

    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbartogg" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span ></span>
        </button>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

CodePudding user response：

You've set the navbar (text) color to the dark theme but haven't applied a background color, so it's white-on-white. You need to also add bg-dark.

https://getbootstrap.com/docs/5.2/components/navbar/#color-schemes

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<nav >
  <div >

    <a  href="index.html"><img src="https://via.placeholder.com/200" alt="Largs Model Boat Club Logo" style="width:200px;"></a>
    <h1 >Largs Model Boat Club</h1>

    <div  id="navbartogg">
      <ul >
        <li >
          <a  href="gallery.html">Gallery</a>
        </li>
        <li >
          <a  data-bs-toggle="dropdown" href="news_uc.html">News & Events</a>
          <ul >
            <li><a  href="#">Link 1</a></li>
            <li><a  href="#">Link 2</a></li>
            <li><a  href="#">Link 3</a></li>
          </ul>
        </li>
        <li >
          <a  href="aboutlargs_uc.html">About Largs</a>
        </li>
        <li >
          <a  href="contactus.html">Contact Us</a>
        </li>
        <li >
          <a  href="index.html">Home</a>
        </li>
      </ul>
    </div>

    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbartogg" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span ></span>
        </button>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

CodePudding user response：

you just misplaced the color of the background, you can simply add bg-dark or remove navbar-dark

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<nav >
  <div >

    <a  href="index.html"><img src="https://via.placeholder.com/200" alt="Largs Model Boat Club Logo" style="width:200px;"></a>
    <h1 >Largs Model Boat Club</h1>

    <div  id="navbartogg">
      <ul >
        <li >
          <a  href="gallery.html">Gallery</a>
        </li>
        <li >
          <a  data-bs-toggle="dropdown" href="news_uc.html">News & Events</a>
          <ul >
            <li><a  href="#">Link 1</a></li>
            <li><a  href="#">Link 2</a></li>
            <li><a  href="#">Link 3</a></li>
          </ul>
        </li>
        <li >
          <a  href="aboutlargs_uc.html">About Largs</a>
        </li>
        <li >
          <a  href="contactus.html">Contact Us</a>
        </li>
        <li >
          <a  href="index.html">Home</a>
        </li>
      </ul>
    </div>

    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbartogg" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span ></span>
        </button>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>