-1

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>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
mashtock
  • 400
  • 4
  • 21

1 Answers1

1

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/bootstrap@5.1.0/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/bootstrap@5.1.0/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/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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.