My bootstrap code for Navbar toggler is not working

Question

My code for navbar toggler is not working even after many attempts it shows the button but doesn't expand for the list and even for the desktop screen, it shows the toggle. Please Help
Edit-1: After adding https {before HTTP in jquery link} the toggle gets quickly collapsed, it is not holding the expanding form.

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title></title>
   <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand " href="#">Logo</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">



      <ol class="navbar-nav ml-auto">
        <li class="navbar-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="navbar-item">
          <a class="nav-link" href="#">Skills</a>
        </li>
        <li class="navbar-item">
          <a class="nav-link" href="#">Profile</a>
        </li>

      </ol>
</div>
  </nav>
</body>

</html>

You're using mixed versions of Bootstrap CSS (v4) and JS (v3). Also the jquery version is old. — Zim

Simone Rossaini Simone Rossaini · Accepted Answer · 2020-05-20T10:39:35

Simple change HTTP to HTTPS for bootstrap.js resource. And changed version of that.

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title></title>
   <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand " href="#">Logo</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">



      <ol class="navbar-nav ml-auto">
        <li class="navbar-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="navbar-item">
          <a class="nav-link" href="#">Skills</a>
        </li>
        <li class="navbar-item">
          <a class="nav-link" href="#">Profile</a>
        </li>

      </ol>
</div>
  </nav>
</body>

</html>

My bootstrap code for Navbar toggler is not working

1 Answers