1

I'm having a bad time with this Bootstrap menu I made, and I can't figure it out why it won't collapse, animate. Everything works great and all, but the button doesn't work.

        <nav class="navbar navbar-expand-lg navbar-light bg-dark alb">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <!-- Logo pentru desktop -->
                    <a href="index.html" class="logo">
                        <img src="img/logo.png" alt="IMG-LOGO">
                    </a>

          <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
              <li class="nav-item active">
                <a class="nav-link" href="#" style="color:white">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" style="color:white">Marci moto</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" style="color:white">Sectiune dezactivata</a>
              </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit" style="color:white">Cautare</button>
            </form>
          </div>
        </nav>
Cristi Marc
  • 25
  • 5
  • It seems to work fine in when I checked. Here is the codepen link. [link](https://codepen.io/milanlakhani/pen/RwPygNz). make sure you have bootsrap and jquery properly installed. here is the jquery cdn link. `https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js` and also bootstrap.min.js file `https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js`. Also make sure that jquery cdn is placed above the bootsrap.min.js – Milan Lakhani Mar 16 '20 at 06:49
  • Does this answer your question? [Bootstrap dropdown not working](https://stackoverflow.com/questions/12458522/bootstrap-dropdown-not-working) – Milan Lakhani Mar 16 '20 at 06:50

1 Answers1

1

I have used your same code and just use online CDN in my code it's works fine for the same code you are provided. Compare your code with mine and find what was the mistake.

following is the snippet of my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-dark alb">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a href="index.html" class="logo">
      <img src="img/logo.png" alt="IMG-LOGO">
    </a>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#" style="color:white">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" style="color:white">Marci moto</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" style="color:white">Sectiune dezactivata</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit" style="color:white">Cautare</button>
      </form>
    </div>
  </nav> 
</body>
</html>

I hope this will help you to solve your problem.

Thank You...

KuldipKoradia
  • 3,005
  • 7
  • 20