Bootstrap navbar toggle button stopped working-Twitter bootstrap

ebere
March 17, 2018
194 views
0 votes
2 Answers

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

Answers

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

- AbslenChar
- March 17, 2018 at 7:09 pm
- 0 votes
0
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>
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.