Menu randomly disappearing and slow

Hi there,

This is related to the caching on your site, the mega menu is displayed after the assets are loaded to make sure the menu style is applied with no issue.

As for the random appearance/disappearance, it happens when the menu JS isn’t loaded.

So please make sure to exclude this file “wp-content\plugins\premium-addons-for-elementor\assets\frontend\min-js\premium-nav-menu.min.js” from being cached or deferred.

Thanks

I’ll give that a try. Thank you

Is there any way/setting I can use to force the menu to load in parallel with the site assets, rather than at the end after all site assets are loaded? I would like to eliminate the delayed load of the menu if testing doesn’t reveal any problems.

• This reply was modified 10 months, 2 weeks ago by savingyourtail.

Hi there,

It only depends on the assets needed for the mega menu to be displayed correctly, not all the site’s assets.

On the over hand, forcing the menu to be displayed before those assets are loaded will cause menu to appear simply as a mess till the CSS are loaded and applied.

Thanks – but unfortunately I am still having issues after attempting to exclude this file from caching: premium-nav-menu.min.js. They may have even worsened as I can’t get the menus to show up on the homepage, both on desktop and mobile.

I tried adding premium-nav-menu.min.js to the exclusion list for my wpspeed plugin which didn’t help. I then reached out to my host (wpengine) and asked them how to exclude this file from caching. The person I spoke with initially said they can only exclude paths, arguments, and cookies. They added the premium-nav-menu.min.js file to the exclusion list, and also created a web rule setting, URI type, with value “no-store” for the path: ^/wp-content\plugins\premium-addons-for-elementor\assets\frontend\min-js\premium-nav-menu.min.js

But the issues persist. Is it possible there is another problem going on besides the caching?

Hi there,

I don’t see any cause for this issue except for the assets optimization, you?can notice this issue happens on the first visit to a page – it also affects other functions on your?site,?the search icon/form,?and the article listing won’t work here for example?https://savingyourtail.com/earning/?-, and everything starts working on the second visit to the page since the minified JS file is loaded.

To make sure that’s the cause of the problem, could you please try to deactivate your optimization plugin and let me know if the issue persists?

Thanks

You can also add the following CSS lines to your header to force load the menu in parallel.

header .premium-nav-widget-container {
visibility: inherit;

opacity: inherit;

}

.premium-nav-menu-container.premium-nav-default {

display: inherit;

}
Thanks

Hi @savingyourtail

We didn’t hear back from you. I hope everything is going fine with you today.

Hi – thanks for the reply. I’m still in the process of testing/debugging to see if the suggestions resolve the issues and if I can find a work around. Will let you know

Hi – it does appear that my optimization plugin was the source of these issues. After disabling it, the caching related issues have disappeared. Thanks for the help. One last question – on the CSS lines to load the menu in parallel, I believe I’ve added it to the site header, if I did it correctly, and I believe I may notice an improvement in speed of the menu loading. Do you recommend I keep this code even though the caching related issues have resolved?

Just an update – I added the CSS code to the header, and I feel like I can see much quicker loading of the menu on the desktop. However, when I pull up the site on mobile now, the header menu is all jumbled and the mobile menu missing. Do you think there’s a way to fix that, or would it be best to remove the CSS?

Could you please elaborate a bit on the “the header menu is all jumbled”? it would be great if you could provide a screenshot of the issue as everything is working fine from our end now.

As for the CSS, it shouldn’t affect the menu style, it only makes the menu visible without waiting for the assets loading.

Sure. I removed the code temporarily since it had been a few days, but just added it back to the header so you can see it live. The issue appears on mobile. Also, here is a screenshot as requested:

https://ibb.co/hy4dxzv

• This reply was modified 10 months ago by savingyourtail.

I’ve modified the CSS code to fix the issue, so please use the following lines instead and let me know if it did the trick.

header .premium-nav-widget-container {
visibility: inherit;

opacity: inherit;

}

header:not(.elementor-hidden-desktop) .premium-nav-menu-container.premium-nav-default {

display: inherit;

}

Thanks

This did the trick. The display issues are fixed, and the menu is loading noticeably faster than before. Thanks so much!

• This reply was modified 10 months ago by savingyourtail. Reason: marked resolved