Bootstrap - Header does not dropdown-CodePudding

<!DOCTYPE html>
<html>
<head>
 
    <link rel="stylesheet" href="/static/nav.css"> <!—secondary bootstrap code—!>
    <link rel="stylesheet" href="/static/bootstrap.css">   
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>  </head>
<body>
 
<header>
<nav >
  <div >
    <a  href="/link">Link</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span ></span>
    </button>
    <div  id="collapsibleNavbar">
      <ul >
        <li >
          <a  href="/link">Link</a>
        </li>
        <li >
          <a  href="#" role="button" data-bs-toggle="dropdown">Link</a>
          <ul >
            <li><a  href="/link">Paid Services</a></li>
            <li><a  href="/link">Flash Documentation</a></li>
            <li><a  href="/link">SMS Bomb</a></li>
            <li><a  href="/link">MDickie Projects</a></li>
            <li><a  href="/link">BxPP</a></li>
          </ul>
        </li>
        <li >
          <a  href="#" role="button" data-bs-toggle="dropdown">Link</a>
          <ul >
            <li><a  href="/link">Link</a></li>
            <li><a  href="/link">Link</a></li>
            <li><a  href="/link">Link</a></li>
            <li><a  href="/link">Link</a></li>
          </ul>
        </li>
        <li >
          <a  href="#" role="button" data-bs-toggle="dropdown">Link</a>
          <ul >
            <li><a  href="/link">Link</a></li>
            <li><a  href="/link">Link</a></li>
            <li><a  href="/link">Link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
    </header>
</body>
</html>

Hello community of Stackoverflow. This bootstrap header doesn't dropdown on mobile devices. I have the JS and CSS, and I really don't know what do. Can someone help? Replace the "/" with atproducts.xyz since it triggered the spam filter.

CodePudding user response：

The issue is in your local css. I've replace this rows

<link rel="stylesheet" href="/static/nav.css"> <!—secondary bootstrap code—!>
<link rel="stylesheet" href="/static/bootstrap.css">

With the official bootstrap CDN and it works.

So your page should be

<!DOCTYPE html>
<html>
<head>
 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">   
      </head>
<body>
 
<header>
<nav >
  <div >
    <a  href="/link">Link</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span ></span>
    </button>
    <div  id="collapsibleNavbar">
      <ul >
        <li >
          <a  href="/link">Link</a>
        </li>
        <li >
          <a  href="#" role="button" data-bs-toggle="dropdown">Link</a>
          <ul >
            <li><a  href="/link">Paid Services</a></li>
            <li><a  href="/link">Flash Documentation</a></li>
            <li><a  href="/link">SMS Bomb</a></li>
            <li><a  href="/link">MDickie Projects</a></li>
            <li><a  href="/link">BxPP</a></li>
          </ul>
        </li>
        <li >
          <a  href="#" role="button" data-bs-toggle="dropdown">Link</a>
          <ul >
            <li><a  href="/link">Link</a></li>
            <li><a  href="/link">Link</a></li>
            <li><a  href="/link">Link</a></li>
            <li><a  href="/link">Link</a></li>
          </ul>
        </li>
        <li >
          <a  href="#" role="button" data-bs-toggle="dropdown">Link</a>
          <ul >
            <li><a  href="/link">Link</a></li>
            <li><a  href="/link">Link</a></li>
            <li><a  href="/link">Link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
    </header>

<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

I've also moved the script at the bottom, before the body closing .

CodePudding user response：

Add the following code to your <head> tag and it will work. Also do not download the single file of bootstrap instead download the whole bootstrap and then include it in your project.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  ...
</head>

Also move the bootstrap JS link to the end of your <body> tag.

<body>
  ...
  <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>