admin管理员组文章数量:1296895
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="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="mystyle.css">
<script src="/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="//code.jquery/jquery.min.js"></script>
<script src="/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
</head>
<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>
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/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/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/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="//code.jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
</head>
<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>
1 Answer
Reset to default 0You 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/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/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/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
Demo @ StackBlitz
本文标签： bootstrap 5Navbar toggler icon doesn39t close when it is clickedStack Overflow
版权声明：本文标题：bootstrap 5 - Navbar toggler icon doesn't close when it is clicked - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741645009a2390133.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论