user3216077 user3216077 - 7 months ago 12
Javascript Question

How to hide my collapse bootstrap 3 navbar with click on body when, collapse is visible?

I'm making a WordPress website for agency where I will go work.
I used Bootstrap 3.0, and I created a responsive menu.

How to hide menu when is collapsed and visible (2nd pic) with click on body, and menu button change it color only collapse is visible?

bootstrap.js and jquery is connected in my footer.

Answer

Try This Example

<script type='text/javascript'>

    $(document).ready(function () {
        function CloseNav() {
            $(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
            $(".navbar-toggle").stop().removeClass('collapsed');
        }

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

        });
    });

</script>

Update

you can change the html selector to whatever selector you want, body (if you have enough height), wrapper or whatever. A clean fiddle example here