How to Hide Collapsible Bootstrap Navbar on Click

How to hide collapsible Bootstrap navbar on click

Update 2021 - Bootstrap 5 (beta)

Use javascript to add a click event listener on the menu items to close the Collapse navbar..

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => {
l.addEventListener('click', () => { bsCollapse.toggle() })
})

BS5 demo javascript method

Or, Use the data-bs-toggle and data-bs-target data attributes in the markup on each link to toggle the Collapse navbar...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<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">
<li class="nav-item active">
<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Disabled</a>
</li>
</ul>
<form class="d-flex my-2 my-lg-0">
<input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>

BS5 demo data-attributes method


Update 2019 - Bootstrap 4

The navbar has changed, but the "close after click" method is still the same:

BS4 demo jQuery method

BS4 demo data-toggle method


Bootstrap 3 (original answer)

You can add the collapse component to the links like this..

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home" data-toggle="collapse" data-target=".navbar-collapse.show">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.show">Pricing</a>
</li>
</ul>

BS3 demo using 'data-toggle' method

Or, (perhaps a better way) use jQuery like this..

$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});

BS3 demo using jQuery method

Auto close Navbar when click on link (responsive mode)

UPDATE:

You can Add ".single" class to every element which does not have any dropdown items then whenever someone clicks on the ".single" class you hide the menu.
And whenever someone clicks on the ".dorpdown-item" you hide the menu again.

Use following code:

   $( document ).ready(function() {

$('.dropdown-item').click(function(){
$('.navbar div').removeClass('show');
});
$('.single').click(function(){
$('.navbar div').removeClass('show');
});

});

See this working fiddle https://jsfiddle.net/mayureshpitale/4udmxpth/18/

Hide Twitter Bootstrap nav collapse on click

try this:

$('.nav a').on('click', function(){
$('.btn-navbar').click(); //bootstrap 2.x
$('.navbar-toggle').click(); //bootstrap 3.x by Richard
$('.navbar-toggler').click(); //bootstrap 4.x
});

how hide navbar in bootstrap 5 after click

It's open by default because the script instaniates the Bootstrap Collapse. Simply set the toggle option to false...

const bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})

Bootstrap collapse navbar on click

I have two solutions for this:

First option: data-toggle attribute

You can add the following attributes to the anchors data-toggle="collapse" data-target=".in"
This way, menu will collapse when a menu item is selected.

Here's your code:

    <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Brand</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<!-- Add data-toggle="collapse" data-target=".in" to <a> elements-->
<!-- This way they will collapse the responsive menu when clicked -->
<li class="active"><a data-toggle="collapse" data-target=".in" href="#sectionA">Page1</a></li>
<li><a data-toggle="collapse" data-target=".in" href="#sectionB">Page2</a></li>
<li><a data-toggle="collapse" data-target=".in" href="#sectionC">Page3</a></li>
</ul>
</div>
</div>
</nav>

Example: http://jsfiddle.net/Frondor/sey4wsah/


2nd alternative option: using jQuery (best method)

If the first example isn't working for you, you can just add a few lines of jQuery below jQuery and Bootstrap.js library calls, don't forget about the jquery.js and Bootstrap.js API:

<script src="/js/jquery.min.js"> <!--suppose these are the same paths you're using for it -->
<script src="/js/bootstrap.min.js">

And below:

<script>
$(document).ready(function () {
$("nav").find("li").on("click", "a", function () {
$('.navbar-collapse.in').collapse('hide');
});
});
</script>

This will match every link on your responsive menu, and collapse said menu at click event.
Give it a try



Related Topics



Leave a reply



Submit