CODEWITHSUNDEEP
jquerytwitter-bootstrapresponsive-designnavbar
luidgi27
luidgi27

Reputation: 324

Hide Twitter Bootstrap navbar on click

I wanted to close the mobile navbar on click, I see the answer for my question here. The problem with the code given in this question is that it's always trying to close the navbar, no matter if we see the toggle navbar or the "Normal" navbar. So I want to do an if/else that check if the width is higher or lower that 768px (the width that changes the navbars), so I have this in my document.ready() right now.

 function close_toggle() {
   if ($(window).width() <= 768) {

    $('.nav a').on('click', function(){
        $(".navbar-toggle").click();
    });
 } 
}
close_toggle();

$(window).resize(close_toggle);

The problem with this code is that if I start with a width higher than 768px and go to less than 768px all works good. But if I start with a width lower that 768px when I resize to higher that 768px the normal navbar will blink when I click in the links (because is closing the toggle menu, I think).

So I need an else statement to reverse the if code, but I don't know how to reverse that code. Please sorry for some English errors. Hope someone could help me.

Upvotes: 3

Views: 3563

Answers (1)

Paulo Roberto Rosa
Paulo Roberto Rosa

Reputation: 3285

Look if it helps:

 function close_toggle() {
   if ($(window).width() <= 768) {
      $('.nav a').on('click', function(){
          $(".navbar-toggle").click();
      });
   }
   else {
     $('.nav a').off('click');
   }
}
close_toggle();

$(window).resize(close_toggle);

Upvotes: 7

Related Questions