CODEWITHSUNDEEP
bootstrap-5navbar
Evita
Evita

Reputation: 3

Navbar toggler icon doesn't close when it is clicked

I am looking for hours to fix an issue has appeared in the navbar-toggler in bootstrap version (5.3) in viewport of mobile.It opens when it is clicked but it doesn't close when it is clicked again.

I used only bundle.min.js but it didn't work.Then I used also popper.min.js with bootstrap.min.js but it didn't work either. I also have a dropdown menu item and when I use one of the above solutions, it doesn't work, so I used both of them to fix this but the problem with toggler remains. Any advice would be helpful.

index.html

<head>
<title>ArtShop Original & Prints; Evita Zacharioudaki</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1.0">
<meta charset="utf-8">

 
<!-- vendor css files -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<link rel="stylesheet" href="mystyle.css">



<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
    crossorigin="anonymous"></script>



<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script> 
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
    crossorigin="anonymous"></script>
</head>
The Cre-Art 
  <div class="collapse navbar-collapse flex-grow-0" id="navbarNav">
    <ul class="navbar-nav d-lg-flex align-items-center text-center">
      <li class="nav-item">
        <a class="nav-link active mx-3 text-black fs-5  active" aria-current="page" href="index.html">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle text-black fs-5" href="#" role="button" 
          data-bs-toggle="dropdown" aria-expanded="false">About</a>

        <ul class="dropdown-menu ">

          <li><a class="dropdown-item" href="meettheartist.html">Meet The Artist</a></li>

          <li><a class="dropdown-item" href="evitaartstudio.html">Evita's Art Studio</a></li>

        
        </ul>
      </li>



      <li class="nav-item "><a class="nav-link mx-3 text-black fs-5" href="portfolio.html"
          target="_blank">Portfolio</a></li>
      <li class="nav-item "><a class="nav-link mx-3 text-black fs-5" href="shoplist.html" target="_blank">Shop</a>
      </li>

      <li class="nav-item "><a class="nav-link mx-3 text-black fs-5" href="contact.html">Contact</a></li>
    </ul>
  </div>
</div>

Upvotes: 0

Views: 47

Answers (1)

Yong Shun
Yong Shun

Reputation: 51420

You should only use Bootstrap Bundle or Bootstrap + PopperJS Core but not both together.

Hence, if you use the Bootstrap Bundle:

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
  crossorigin="anonymous"
></script>

Otherwise, use Bootstrap & PopperJS Core. Make sure that you must import the PopperJS Core script first before the Bootstrap script.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
  integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
  crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
  integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
  crossorigin="anonymous"></script>

Demo @ StackBlitz

Upvotes: 0

Related Questions