title: Fixed Div disappears in mobile browsers
body: <p>On a site that I'm working on, there is a menu that is a fixed div that shows when the screen width is less than 769px.</p>
  
  <p>A fixed div is toggled when the top bar is clicked (and the menu-open class is added).  </p>
  
  <pre><code>.header nav  {
          position: fixed;
          left: -330px;
          top: 75px;
          background: #87cc33;
          width: 330px;
          bottom: 0;
          z-index: 1000;
          overflow:auto;
          /* Transitions */
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          transition: all 0.3s ease;
      }
  
  .menu.menu-open {
      left: 0px;
  }
  </code></pre>
  
  <p>This works fine in desktop browser, but I get some strange behavior when I use a mobile browser (or with Chrome using device mode).</p>
  
  <p>In mobile, there are 2 issues:</p>
  
  <p>1) The menu disappears when the content of the page is scroll-able.  However, the menu toggling still works - if I try to open the menu in device mode using developer tools on Chrome it will not open, but if I disable device mode, the menu is open.</p>
  
  <p><a href="http://jsfiddle.net/yrc2bfn4/" rel="nofollow">http://jsfiddle.net/yrc2bfn4/</a></p>
  
  <p>2) If the page content is short enough so that there is no scrolling, the menu displays in device mode.  However, if the device screen is small enough to cause the menu to scroll, then the menu disappears again.</p>
  
  <p><a href="http://jsfiddle.net/q63cke2u/" rel="nofollow">http://jsfiddle.net/q63cke2u/</a></p>