Can't get bootstrap navigation toggler to work [duplicate]-CodePudding

I am trying to get the following lines to work using bootstrap, but I'm facing a difficulty in which when I click on the toggler nothing appears. The button does appear to notice when I'm hovering on it and clicking but nothing appears. I'm using the same example as in the official following page: https://getbootstrap.com/docs/4.0/components/navbar/

If someone can figure out the problem help would be greatly appreciated.

I have made sure that the problem isn't connected to my CDN links and I hope I checked for all possible typo mistakes.

       <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top navbar-default" id="sideNav">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">
        <span class="d-block d-lg-none">Guy</span>
        <span class="d-none d-lg-block">
            <img class="img-fluid img-profile mx-auto mb-4" src="img/profile.jpeg" alt="">
        </span>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#awards">Curriculum Vitae</a>
            </li>
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#experience">Portfolio</a>
            </li>
            <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#education">Publications</a>
            </li>
        </ul>
    </div>

</nav>

CodePudding user response：

Try this code may be you not using CDN in correct format.

Replace:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

With:

 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
       <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top navbar-default" id="sideNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
    <span class="d-block d-lg-none">Guy</span>
    <span class="d-none d-lg-block">
        <img class="img-fluid img-profile mx-auto mb-4" src="img/profile.jpeg" alt="">
    </span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#awards">Curriculum Vitae</a>
        </li>
        <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#experience">Portfolio</a>
        </li>
        <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#education">Publications</a>
        </li>
    </ul>
</div>

</nav>


    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Your Style CDN is inside head tag and your script CDN is after all the html code.

Let me know if this will work for you.