Foundation-sites: Menu Flash or Menu Display Delay

[tsquez]

I have just recently noticed this....not sure if it's an issue (I think it may be on my end) however I just noticed it and now that I have it's irking the hell out of me...lol

There seems to be a menu flash when you load the page. Well more of like a delay I suppose. Take a look here https://themeawesome.com/themes/wpforge/ and you will see the menu takes a little bit longer to load than everything else causing a menu flash.

Any WordPress experts out there in Zurb land that can maybe help fix the issue. What do yah think @brettsmason, I know you mess with WordPress, any ideas?

[codetheorist]

@tsquez for a start, I would definitely try using optimized versions of the CSS files, each CSS file that are being loaded on the page are taking 500ms each. I'd maybe try it with caching too, but remembert turn it off again if your developing.

[tsquez]

@codetheorist I def thought of that, however I am developing a new theme, built the same as WP-Forge and it uses the minified versions all on one stylesheet and the menu still has that same flash.

this is the order they are in: Font-Awesome (minified), Foundation(minified) and then the regular WP styles (not minifed, not yet) and no caching.

I mean I really don't care that it flashes. What bothers me is that I don't _know_ why it's doing that and it's going to bother me until I find out...lol

[codetheorist]

Haha, I'm exactly the same!

There's a cloudflare JS that is dynamically injected that could also be causing the issue, but I see jQuery Migrate is also in use, which does slow down the execution somewhat. I would advise to try and build the theme with the correct version of jQuery rather than using jQuery Migrate.

It's quite easy to de-queue jQuery in Wordpress and en-queue an up to date version, even if just to test.

[tsquez]

Yes that demo site uses cloudflare, however my local dev does not and it still flashes.

The jQuery migrate is part of WordPress, I call the jquery version that ships with WP and that migrate file is loaded automatically. Good idea though. I did a search and found this:

https://isabelcastillo.com/remove-jquery-migrate-script-wordpress

I'm gonna give it a try and see what happens

[tsquez]

Tried it but no difference...grrrrr.....lol 😆

[codetheorist]

@tsquez Could you disable plugins and/or widgets to rule each of them out individually?

If you solve it, do let me now how. As a side note, I had this problem once with a Drupal site and it turned out to be the carousel that we were using.

[brettsmason]

@tsquez I'll be around in 2 hours then I'll help you get this sorted out :thumbsup:

[tsquez]

@brettsmason thanks amigo, I appreciate the help

@codetheorist - I have all plugins turned off on my local dev site.

[brettsmason]

@tsquez OK had a look at the site and there doesn't appear to be anything too obvious going on.

I see you are using WP Rocket - could you try disabling that? I have a hunch that its this causing the weird behaviour. If that doesn't help then we can go from there.

[tsquez]

@brettsmason I thought about that as well, however on my local system I do not have cloudflare or any caching whatsoever and I still get the same menu delay

[codetheorist]

The local issues may just be down to the dev environment. I would recommend clearing up the issues on the page that we can see first, so we know how to help you best.

[tsquez]

@codetheorist yes I know how the process works, been doing this a long time. I can say with all certainty that it's something in the theme 😉

[brettsmason]

@tsquez Have you tried loading 6.3 CSS/JS to confirm its nothing to do with 6.4?

[tsquez]

I can do that if you would like me to. I think I will do it anyway...lol gimme a few

[tsquez]

OK I switched to 6.3.0 and the flash is still there...grrrrr...lol

[codetheorist]

@tsquez I know you may be able to say with certainty, but for anyone to be able to help you properly, we need to see what you are seeing.

If you don't want to mess with the live version, could you setup a staging copy on a sub-domain or something? Maybe even setup a tunneling proxy to your dev server?

[tsquez]

@codetheorist 0_o - um you can install the theme yourself and it will do exactly the same thing. I know you're trying to be helpful but you are "seeing what I am seeing" and "setting up a staging area and yada yada yada" isn't going to help.

Sorry but I think I will just leave it alone. Thanks for trying to help though, I appreciate it 😉

[tsquez]

@codetheorist - here is a site that doesn't have any plugins activated, no caching whatsoever, nothing....zip, zero, ziltch. Except of course a flashing menu 😉

https://yourthemedemo.com/

[kball]

I suspect this to be an issue with either the responsive toggle plugin or its configuration...

[tsquez]

that's what I was thinking earlier, something to do with the "no-js". I remember there was an issue of some kind due to flashing and the fix was to add this to the css:

.no-js [data-responsive-toggle],
.no-js .top-bar {
  display: none!important;}

[data-responsive-menu] ul {
  display: none;}

Like I said it's no biggie, just bugging me because I don't know what's causing it.

[kball]

@tsquez it's 100% due to that, as that will result in the top bar not showing until the JS runs on the page... I think there's probably a better way to fix the flashing you were seeing before, do you want to try putting together a codepen to reproduce it?

[tsquez]

@kball I KNEW IT!!!...lol - I would love to try and get it fixed as this could possibly help other WP devs who use F6 and are experiencing the same thing. One thing though: How do I do a codepen...lol if you can please email me some instructions, my email is part of my profile.

[tsquez]

@kball - OK I think I got the pen down...lol https://codepen.io/tsquez/pen/BZPEwv
I hope this correct if not please let me know.

[tsquez]

With the help of @kball we seem to have possibly corrected the issue by changing the following

.no-js [data-responsive-toggle],
.no-js .top-bar {
  display: none!important;}

[data-responsive-menu] ul {
  display: none;}

to

.no-js [data-responsive-toggle],
.no-js [data-responsive-menu] ul {
    display: none!important;}
@media screen and (max-width:39.9em) {
    .no-js .top-bar {display: none; }
    .no-js .title-bar {display: flex;}
}

@kball stated in an email

going to add it to the issue to investigate a better fix

Seems to work for now until a definite fix can be applied. Thanks for all the help. It's greatly appreciated.

[davethecipo]

@tsquez can I ask where you applied the no-js class? I don't see it in the codepen.

[tsquez]

@davethecipo its in the actual header.php file of the theme, not in the codepen:

<!doctype html>
<html class="no-js" <?php language_attributes(); ?>>

Hope this helps

[DanielRuf]

Currently it is unclear if this is about a specific implementation or a bug in Foundation Sites. Closing this due to the unclear situation and it seems you fixed it in your project.