Bootstrap navbar toggle button stopped working

HTML-CSS
1

My bootstrap navbar toggle button stopped working after I restarted my PC. Ive tried to troubleshoot it but I could not find the problem.Here is the site: https://ebereorisi.github.io Here is my code:

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

    <!-- custom external links -->

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <link rel="stylesheet" type="text/css" href="custom.css">

    <script src="custom.js"></script>

    <title>Ebere Orisi</title>
  </head>
  <body>

    <div class=""><!--OVERALLBODY-->


      <div class="navigation"><!--NAVIGATION HEAD-->

        <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
          <div class="container">
            <div class="row">
              <div class="navi-left">
                <div>
                  <a class="navbar-brand" href="https://blurpshell.github.io">Ebere Orisi</a>
                </div> 
              </div>
            </div>

            <div class="socialLinks mx-auto">
              <a href="https://www.linkedin.com/in/ebereorisi/" target="_blank"><i class="fab fa-linkedin-in fa-lg"></i></a>&ensp;
              <a href="https://blurpshell.wordpress.com" target="_blank"><i class="fab fa-blogger-b fa-lg"></i></a>&ensp;
              <a href="https://github.com/ebereorisi" target="_blank"><i class="fab fa-github fa-lg"></i></a>&ensp;
              <a href="https://twitter.com/blurp_shell" target="_blank"><i class="fab fa-twitter fa-lg"></i></a>&ensp;
            </div>

            <div class="navi-right">
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
             </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#itSec">IT SECURITY <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#webDev">SOFTWARE & WEB </a>
                <a class="nav-item nav-link" href="#getInTouch">CONTACT</a>
            </div>
            </div>
          </div>
          </div>
        </nav>
        
      </div><!--NAVIGATION HEAD-->
2

What do you mean when you say

toggle button stopped working

3

Hi ebereorisi,

The collapse button will only work if you load jQuery and the bootstrap.js package into your project. Not sure if bootstrap documents this anywhere, but I’ve tested it in my project: https://codepen.io/pwkrz/pen/WMzQEm?editors=1000

I don’t see your page referencing the boostrap.js package, so that might be the problem. Use the info in the link below to add the package and let me know if it worked.

4

I linked to the Bootstrap CDN

5

Just to clarify - by “bootstrap.js package” I meant https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js, which you can add to your page like this:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>