Navbar with dropdown menus will not work. #37551

Alex-Toucan · 2022-11-28T19:08:43Z

Alex-Toucan
Nov 28, 2022

    <html lang="en">
<head>    
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">  
        <script src="/static/purecookie.js"></script>
      </head>
      <body>
      <div id="page">
    <header>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">AT Products LLC</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="/">AT Products</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Products</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/paid">Paid Services</a></li>
                <li><a class="dropdown-item" href="/flash">Flash Documentation</a></li>
                <li><a class="dropdown-item" href="/sms">SMS Bomb</a></li>
                <li><a class="dropdown-item" href="/mdickie">MDickie Projects</a></li>
                <li><a class="dropdown-item" href="/bxpp">BxPP</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
        </header>  
      </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </body>
    </html>

This navbar contains dropdown menus that don't work while converting from Bootstrap v5.2.2 to v5.2.3. It does not dropdown, instead staying still. Can someone explain what I am doing wrong?

Answered by julien-deramond

Nov 28, 2022

In your <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> you probably kept the previous value of integrity.

It generates a log in the Dev Tools: None of the "sha384" hashes in the integrity attribute match the content of the subresource.

Replace by <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> and it works

My advice would be to use rather <script src="https://cdn.jsdelivr.net/npm/bo…

View full answer

julien-deramond · 2022-11-28T19:18:57Z

julien-deramond
Nov 28, 2022
Maintainer

In your <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> you probably kept the previous value of integrity.

It generates a log in the Dev Tools: None of the "sha384" hashes in the integrity attribute match the content of the subresource.

Replace by <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> and it works

My advice would be to use rather <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> where the specific version is mentioned otherwise you'll have the same issue when we will release another version of Bootstrap.

1 reply

Vijayamrav May 31, 2024

thanks a lot its working fine now

mejia-b · 2022-12-22T05:52:00Z

mejia-b
Dec 22, 2022

I just noticed the same issue as @Alex-Toucan. I'm using a basic navbar component and including this js bundle:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Dropdown does not work.

I decided to use an older versions and it worked:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script

3 replies

julien-deramond Dec 22, 2022
Maintainer

Could you drop a CodePen here or something else so that someone can help you fixing the issue? Because dropdowns in navbars actually work in v5.2.3 (see Navbar > Supported content).
I don't have any source code to check in your case but I'll try something randomly: check that you use data-bs-toggle and not data-toggle.

mejia-b Dec 22, 2022

Hi @julien-deramond making sure it had data-bs-toggle instead of just data-toggle fixed it. Thank you!

Alex-Toucan Dec 23, 2022
Author

Funny that you mentioned me, because I found a solution a while ago. In the CSS / JavaScript source tags, there is a integrity attribute. It may be invaild, so either replace it from the Bootstrap Docs or remove it entirely.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Navbar with dropdown menus will not work. #37551

{{title}}

Replies: 2 comments 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Bootstrap

Navbar with dropdown menus will not work. #37551

Alex-Toucan Nov 28, 2022

Replies: 2 comments · 4 replies

julien-deramond Nov 28, 2022 Maintainer

Vijayamrav May 31, 2024

mejia-b Dec 22, 2022

julien-deramond Dec 22, 2022 Maintainer

mejia-b Dec 22, 2022

Alex-Toucan Dec 23, 2022 Author

Alex-Toucan
Nov 28, 2022

Replies: 2 comments 4 replies

julien-deramond
Nov 28, 2022
Maintainer

mejia-b
Dec 22, 2022

julien-deramond Dec 22, 2022
Maintainer

Alex-Toucan Dec 23, 2022
Author