title: How to make an element with opacity 0 unclickable
body: <p>I know a similar question like this exists here: </p>
  
  <blockquote>
    <p><a href="https://stackoverflow.com/questions/4675916/css3-element-with-opacity0-invisible-responds-to-mouse-events">CSS3 Element with Opacity:0 (invisible) responds to mouse events</a> </p>
  </blockquote>
  
  <p>but this question is different.</p>
  
  <p>I'm trying to implement a hamburger navigation menu for mobile devices using jQuery, CSS as mentioned here: <a href="http://www.jqueryscript.net/demo/Mobile-First-Hamburger-Menu-Plugin-For-jQuery/" rel="nofollow noreferrer">Demo</a>.</p>
  
  <p>This mostly works but there's a catch. In the above demo, they are hiding a navigation div which has been fixed to the top (<code>top:0;left:0</code>) by setting <code>opacity:0</code>. While in the above demo this works perfectly, when I implement it, the hidden div responds to clicks and navigates away from the page.</p>
  
  <p>I'm not understanding how this has been disabled in the above demo (double checked the css / js files but no clue). Does anybody else have an idea? I can't really put up a fiddle since I'm trying this in SharePoint and in the fiddle it works. i just need to understand how they've disabled the click events even when using <code>opacity:0</code> so I can replicate it. Thanks.</p>