Reputation: 55

Bootstrap navbar toggle button stopped working

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 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-->

Please what could the problem be. Here is the actual site: https://ebereorisi.github.io

Upvotes: 1

Answers (2)

Abslen Char

Reputation: 3135

The navbar toggle button depend on bootstrap javascript to work, so on your html document you need to include this at the bottom of your page, dont forget also to include Jquery

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Upvotes: 1

Taki

Reputation: 17654

you need to include the bootstrap javascript somewhere in your html for this to work :

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

i added it in the console ( on your website ) like this :

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js';
document.head.appendChild(script);

and it worked.

<!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>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></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-->

Upvotes: 1

Bootstrap navbar toggle button stopped working

Answers (2)

Related Questions