Header displays for a split second too wide (menu positioning issue)

Thank you, Mike, for taking a look and making this attempt to fix the problem. Unfortunately, it doesn’t work in any browser for me. Did you try it yourself using the website URL I provided in Private Data? Does it work for you?

I tried myself a different attempted solution which you can see in functions.php using a FOUC (flash of unstyled content) approach, but that didn’t work either. But maybe that’s a possible worthwhile approach, to somehow make the menu hidden until after all CSS has loaded. I don’t know.

Any other ideas?

Thanks,
Gary

Thanks, Mike. That’s funny: that’s the exact solution I tried and mentioned above (the “FOUC approach”)–well, Stefan’s solution, not Adam’s (because I don’t know how to do Adam’s inside WordPress), as you can see in my commented out part in functions.php. The investigation continues.

Hi Mike!

Thank you, that does work. But I prefer to keep Page Preloading off, as it looks weird, with the page not loading in pieces like with most websites, but just blank and then it’s all there at once after a time period. If I didn’t find a solution to the FOUC (flash of unstyled content) problem, your Page Preloading solution would have been fine, and I appreciate you finding that solution and giving me that option.

However, I did end up finding a different, more direct solution today, that also looks better. In my Custom CSS file for my child theme, I hide the main menu:

.responsive #top #header #header_main .main_menu {
    display: none !important;
}

Then in my custom functions.php file for my child theme, I display (unhide) the main menu after the whole page has loaded:

add_action('wp_head', 'fouc_protect_against');
function fouc_protect_against () {
  ?>
  <script type="text/javascript">
    jQuery(document).ready(function($) {		            
      $('.main_menu').show();	            
    });  
  </script>
  <?php
}

This seems to work satisfactorily! Hooray!

Speaking of FOUC problems, in case any one else is searching on this problem, I discovered another FOUC issue with the logo, but only in Firefox; all other browsers are fine. There is a FOUC problem in Firefox when loading the logo image: the ALT text displays for a split second before the image displays, giving a FOUC-like flash effect that is ugly. Maybe the problem shows up for every image: I didn’t bother investigating. It only happens in Firefox and is a known bug it turns out. However, a solution like I found for the main menu doesn’t work. But I ended up using the industry accepted solution for this problem, to be added to my Custom CSS file:

img:-moz-loading {
  visibility: hidden;
}

Thanks again, Mike.

All the best,
Gary

Hi Mike! Yes, you can close this issue. I learned a lot in trying to solve this problem. Thanks again for your help. All the best, Gary