How to make Bootstrap navbar in mobile view like a normal menu

Question

http://www.bootply.com/y1iaZwCCct

I'm using this menu in my website but couldn't change the default settings. I need a script in jQuery which makes two things to the menu in mobile-view.

Close when i click on a link.
Close when i click outside the menu.

I`m new to jQuery so any help would be appreciated. Thank you.

I need a script that can do the above two things that i asked. I`m only able to close the menu when a link is clicked but not when clicked outside the menu. — Rajath, Jul 06 '16 at 07:01
i used data-toggle="collapse" data-target=".in" on anchor tags to close the menu when a link is clicked but i also want the menu to close when user click outside the menu — Rajath, Jul 06 '16 at 07:21
Have you searched for a solution? [Here](http://stackoverflow.com/questions/23764863/how-to-close-an-open-collapsed-navbar-when-clicking-outside-of-the-navbar-elemen) — PWL, Jul 06 '16 at 07:25
yeah but still the open menu doesnt close when clicked outside the menu — Rajath, Jul 06 '16 at 07:33
Have you try to type in google before asking ? http://stackoverflow.com/questions/23535289/bootstrap-3-disable-navbar-collapse — BENARD Patrick, Jul 06 '16 at 07:45
yeah i searched but couldn`t find exact solution but now i got the answer from the link @Phil gave — Rajath, Jul 06 '16 at 07:53

score 2 · Answer 1 · answered Jul 06 '16 at 08:14

Try this code also.. it works for me

$(document).mouseup(function (e) {
            e.preventDefault();
            var container = $(".container-fluid");

    if (!container.is(e.target) && container.has(e.target).length === 0) {
                $(".navbar-collapse").collapse('hide');
            }
        });

$(".navbar-nav li a").click(function(e){
                e.preventDefault();

             $(".navbar-collapse").collapse('hide');

  });

score 0 · Accepted Answer · edited Jul 06 '16 at 08:19

FOUND THE SOLUTION......

Use data-toggle="collapse" and data-target=".in" on a-tags or list element to close the menu when a link is clicked.

this code to close the menu when we clicked outside the menu

$(document).click(function (event) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
});

How to make Bootstrap navbar in mobile view like a normal menu

2 Answers2