Skip to content

Bootstrap close responsive menu “on click”

On “PRODUCTS” click I slide up a white div (as seen in attached). When in responsive (mobile and tablet), I would like to automaticly close the responsive navbar and only show the white bar.

I tried:


also tried:


And it does work. However in desktop size, it is also called and does something funky to the menu where it shrinks for a second.

Any ideas?

enter image description here



I’ve got it to work with animation!

Menu in html:

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
             <a href='#somewhere'>Somewhere</a>

Binding click event on all a elements in navigation to collapse menu (Bootstrap collapse plugin):

     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {

EDIT To make it more generic we can use following code snippet

     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
User contributions licensed under: CC BY-SA
2 People found this is helpful