title: My mobile menu code flashes the menu first when page loads, then hides
body: <p>I've used this script on several sites, and it is getting to the point where I have so many sites with this same bug that I need help resolving this once and for all so I do not keep moving the same bug to new production servers</p>
  
  <p>I had a contractor come up with the following for a WordPress mobile menu. It works great, but unfortunately when page first loads the menu loads over the content, and then hides. I cannot figure out for the life of me what is causing this, or what extra JavaScript command I should add to the code to remove the hide on page load.</p>
  
  <p>Here is the jquery:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  //mobile menu
  jQuery(function() {
      jQuery('#menu_btn').click(function() {
          if(jQuery('#main_menu').is(':visible')) {
              jQuery('#main_menu').animate({ left: '-100%' }, 'slow', function () { 
                  jQuery("#main_menu").css('display', 'none');
                  jQuery('#menu_close').css('display', 'none');  
              });
          } else {
              jQuery("#main_menu").css('display', 'block');
              jQuery('#main_menu').animate({ left: '0' }, 'slow', function(){
                  jQuery('#menu_close').css('display', 'block'); 
              });
          }
      });
  
      jQuery('#menu_close').click(function() {
          jQuery('#main_menu').animate({ left: '-100%' }, 'slow', function () { 
              jQuery("#main_menu").css('display', 'none'); 
          });
      });
  
      callOnResize();
  });
  
  jQuery(window).resize( function(){
      callOnResize();
  });
  
  function callOnResize() {
      var winwidth = jQuery(window).width();
      if (winwidth &lt; 760) {
          jQuery( '#main_menu' ).css({ display: 'none' });
          jQuery('#main_menu').animate({ left: '0' }, 'slow');
      } else if (winwidth &gt;= 760) {
          jQuery( '#main_menu' ).css({ display: 'block' });
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And it works on any menu that has the following:</p>
  
  <pre><code>&lt;ul id="main_menu"&gt;
  &lt;li&gt;item&lt;/li&gt;
  &lt;li&gt;item&lt;/li&gt;
  &lt;li&gt;item&lt;/li&gt;
  &lt;li&gt;item&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Any time you spend on this would be greatly appreciated.</p>