0

I am trying to change the default collapse behaviour in a responsive, bootstrap theme for wordpress but I am fairly sure my question relates specifically to Bootstrap.

When the screen width is reduced and the mobile menu icon (hamburger) is clicked on it triggers the collapsing menu. I would like to remove this javascript trigger event and create a new custom event.

The HTML for the button in the theme is: 

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

I have tried using the following javascript to remove the default event but with no luck:

$('button.navbar-toggle').unbind();
$('button.navbar-toggle').off();

I have also tried applying the unbind() and off() methods to the spans within the button, but again with no luck.

I would be very grateful for any help with this.

Fergal Andrews
  • 196
  • 10
  • You should open Dev Tool in Chrome to check Theme then Inspected Element for checking Event – kollein Jul 26 '16 at 10:55
  • Thank you Koellin, that was helpful. I had tried the inspector in Chrome before but stupidly had 'ancestors' enabled. When I disabled that I can find the event I want to disable. – Fergal Andrews Jul 26 '16 at 11:03
  • if you want remove Event set – kollein Jul 26 '16 at 11:10

2 Answers2

0

I think this might be useful. Also you can use window resize function.

 // detect if your screen is smaller
 if ($('body').width() > 960){
 // intercept click event
   $('.item').click(function(){
     //do some stuff
   })
 }else{
   // intercept click event for larger screens
   $('.item').click(function(){
     //do another stuff
   })
 }
Pureferret
  • 6,477
  • 14
  • 72
  • 149
kubilay salih
  • 1
  • 3
0

According to my openion, you should not bother about bind and unbind the different functions for mobile device and desktop.

I would suggest to make a single function in which you can check device type (whether it is mobile or desktop) you can refer this link for check device type

and according to that, you can trigger different function, as you want.

Hope this solution works for you.

Community
  • 1
  • 1
AdiechaHK
  • 446
  • 3
  • 13
  • Thanks for your answer AdiechaHK. My problem though is that I am trying to trigger the menu to appear in a different way (slide in from the right side of the page as an overlay, not pushing the content to the left. I can do this in firefox by attaching a new event. In Chrome however the event is being triggered twice. I was asuming that would be because of an existing envent which was bound to the element but that could be incorrect. – Fergal Andrews Jul 26 '16 at 10:57