Bootstrap 5.1.3 navbar not collapse after click - javascript

The menu in the mobile version opens and works, but after clicking on the menu item the navbar does not collapse... I got the css, js and navbar from the bootstrap site:
Where is the problem?
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

Add this inside your tags. What it'll do is, trigger a click event on the hamburger button, which will cause the menu to collapse.
<script>
jQuery(document).ready(function($) {
$('.navbar-nav li a').on("click", function() {
console.log("menu clicked");
$('button.navbar-toggler').click();
});
});
</script>

Related

Bootstrap toggle button is not working on mobile screen?

I am using Bootstrap but don't know why the toggle button is not working I have searched it on the internet but didn't get the right answer there are many similar questions on the StackOverflow but they are not also solving me problem Like Bootstrap toggle button is not working and bootstrap navbar toggle button is not working
So please can anyone tell me why it is happening.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>TutorInet</title>
</head>
<nav class="navbar navbar-expand-lg navbar-light ">
<div class="container-fluid">
<a style="font-weight: 500;">
<h3 style="color:#4A4A4A;text-transform: uppercase;margin-top:8px;"> Tutor<span
style="color:#F97C44;">I</span>net</h3>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.tutorinet.com/blog.php">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.tutorinet.com/contact.php">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it works</a>
</li>
<li style="color:#1EB909;font-weight: 600;" class="nav-item">
<a style="color:#1EB909;font-weight: 600;" class="nav-link" href="https://www.tutorinet.com/login.php">Log
in</a>
</li>
<button style="color:white;background: #1EB909;border: none;" type="button" class="btn btn-primary"><a
style="color:white;background: #1EB909;" href="https://www.tutorinet.com/signup.php?type=1">Sign
Up</a></button>
</ul>
</div>
</div>
</nav>
You need to remove the bootstrap script you have and include bootstrap.bundle.min.js
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
also the id value in your div should be the same with data-bs-target value in your button
<div class="collapse navbar-collapse" id="navbarSupportedContent">

Bootstrap 4 navbar - collapse on nav-link click in vanilla JS

I am trying to make the Bootstrap 4 navbar only use vanilla js vs any jQuery. So far I've been able to get the toggler to trigger the nav to collapse and close on mobile. What I am now trying to figure out is how to make the navbar collapse when you click on a "nav-link"
Here is my HTML for the nav:
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Browse Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#visit">Contact</a>
</li>
</ul>
</div>
</div>
And my JS for the collapsing
(function () {
"use strict";
document.querySelectorAll("button.navbar-toggler")[0].addEventListener("click", function (event) {
var target = this.getAttribute("data-target");
var subbar = document.querySelectorAll(target)[0];
subbar.className = (subbar.className + " show").replace(/ show show/, "");
});
})();
But how do I make it so when a user clicks a <a class="nav-link" href="#"></a> it'll also collapse the navbar?
Thanks!
Since you are using custom code, it's unnecessary to have the target (data-target="#navbarResponsive") on the html. So we can rewrite the click handler to handle both elements, the toggler and the links. To toggle a class just use the method toggle on classList.
document.addEventListener("click", function(event) {
if (event.target.classList.contains("navbar-toggler-icon")) {
document.getElementById("navbarResponsive").classList.toggle("show");
} else if (event.target.classList.contains("nav-link")) {
document.getElementById("navbarResponsive").classList.remove("show");
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#about">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Browse Menu</a> </li>
<li class="nav-item"> <a class="nav-link" href="#visit">Contact</a> </li>
</ul>
</div>
</div>
</nav>
A possible solution for your question is to find all the .nav-links and add a click listener to remove the show class from the class list.
Also, you could simplify a bit your code using Element.classList.toggle(), something like:
(function() {
let subbar = document.getElementById("navbarResponsive");
document
.querySelectorAll("button.navbar-toggler")[0]
.addEventListener("click", function(event) {
subbar.classList.toggle("show");
});
for (let navItem of document.querySelectorAll("a.nav-link")) {
navItem.addEventListener("click", function(event) {
subbar.classList.remove("show");
});
}
})();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Browse Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#visit">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

Closing hamburger menu on icon, onclick

I have a hamburger menu, which is opening fine. I want it to close when i click again on the hamburger menu icon (this is not working, and im struggling). (it closes only if i click a link or click outside the menu).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top border-bottom border-grey">
<a class="navbar-brand" href="index.html"><img src="img/logomob.png"></a>
<button class="navbar-toggler border-0" type="button" data-toggle="dropdown" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#inicio">ÍNICIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#servicos">SERVIÇOS</a>
</li>
</ul>
</div>
</nav>
A way to do it, is to change
data-toogle="dropdown" to data-toogle="collapse",
but that way, clicking outside the menu or a link, the menu does not close.
I want to close the menu in the hamburger menu icon, but when i click, nothing happens.
If you are using Bootstrap, by default you should have the close capability in Hamburger menu button.
How are you handling this statement?
"it closes only if i click a link or click outside the menu"
Setup Bootstrap Menu.
<nav class="navbar">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
Example
$(document).on('click',function(){
$('.collapse').collapse('hide');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
To achieve expected result, change data-toggle="dropdown" to data-toggle="collapse"
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="img/logomob.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#inicio" ">ÍNICIO</a>
</li>
<li class=" nav-item">
<a class="nav-link" href="#servicos">SERVIÇOS</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap 4 Navbar Collapse doesn't work

I have a problem with Bootstrap 4 navbar collapse feature.
I set it so that the navbar collapse in mobile viewport but instead of collapsing, it shows the items as a vertical list.
This is the code:
<html>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container">
<button class="navbar-toggler" type="button" aria-label="collapse" data-target="#navbarSupportedContent" aria-controls="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbarSupportedContent">
<a class="nav-link" href="#"><i class="far fa-dot-circle fa-lg pt-1"></i></a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
</div>
</div>
</nav>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
I'm using a customized version of Bootstrap 4 (compiled from scss). I tried to use the standard version and it does show the button instead of the vertical list, but it doesn't work too. When I click on the list, nothing happens.
I checked the browser console but it doesn't show any error.
If it helps this is the compiled CSS: https://pastebin.com/jKYGC5A7
And this is the SCSS: https://pastebin.com/bbQNCAvh
The navbar work with ul li item, here is a working example
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">MENU <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENU</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Here is a link in Codepen https://codepen.io/anon/pen/LdZYbP
and here is a screenshot when you're on a mobile view
If you are using scss, make sure to import _transitions.scss.

menu toogle button not working in bootstrap 4

In bootstrap 4 when the header becomes responsive the breadcrumb button not working as it is.
I have included the Bootstrap 4 CSS and bootstrap 4 js
please help me fix the issue
Code:
.navbar {
height:100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container nopadding">
<a class="navbar-brand" href="#">
logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto ">
<li class="nav-item active">
<a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a>SERVICES</a>
</li>
<li class="nav-item">
<a>SUPPORT</a>
</li>
<li class="nav-item">
<a>TECHNOLOGY</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
Image:
Check you error in console Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
add jquery library before the bootstrap js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container nopadding">
<a class="navbar-brand" href="#">
logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto ">
<li class="nav-item active">
<a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a>SERVICES</a>
</li>
<li class="nav-item">
<a>SUPPORT</a>
</li>
<li class="nav-item">
<a>TECHNOLOGY</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Categories