Mega menu full width glitch

Hi @guev4ra,

Thanks for contacting us. Yes, you’re right, it takes a bit to load the JS of MegaMenu, but it depends on the initial response time from the server you’re using.

In order to improve your initial loading time, you can increase your PHP Memory Limit on your site health end.

Regards

Arif

@faithcoder, thanks for reaching out.

Currently, Im in dev mode, but as soon as it is gonna be deployed, servers response will be optimized, but still the issue will persist (its pretty much irrelevant if it is .5s or 2s, it still catches my eye) ??

So, in the end, right now there is no convenient solution for this problem? Can we expect maybe update anytime soon, as I suppose this feature is widely used?

Thanks a lot

• This reply was modified 1 year, 3 months ago by guev4ra.

Hi @guev4ra,

I understand your concern. According to your query, I’ve checked the MegaMenu with multiple environments, it’s loading fine on my end (video). Even all of my ElementsKit Widgets and Modules are active.

If your header part and page content is heavy to load, then it may catch your eye. So it depends on the server, and how heavy page content you’re using.

Please be informed that we have implemented industry-standard code practices as well as minified, optimized code to get the best out of it.

Thanks for understanding me.

Regards

Arif

Hey @faithcoder, we kind of misunderstood eachother.

In the end it works as it is supposed to. Only issue is that it uses JS to resize the width of background container of the submenu or .elementskit-megamenu-panel.

Now, when the user clicks it and does not remove it’s cursor from the element, next page load screen is ugly, as it is shifting the layout.

One quick patch that I added is to hide the subpanel untill the js is fully loaded. To be sure further that the elementskit js files are further loaded, I’ve added extra 400ms of waiting time. In the end, patch should be something like:

// css
body:not(.loaded) .elementskit-megamenu-panel
{
display:none !important;
}

//js 
window.addEventListener("load", function () {
    setTimeout(() =>{
        document.body.classList.add("loaded");
    }, 400);
});

Would be good if there is some kind of JS hook that comes from the plugin, so we can apply this behaviour once it’s triggered to make it running even more smoothly.

Hope you understood my issue ??

• This reply was modified 1 year, 3 months ago by guev4ra.

Hi @guev4ra,

Thanks for letting us know the update with details. I really appreciate your time and effort regarding the issue. But it’s different from what you addressed before. I’m afraid that we hardly provide any custom code support like this. I barely know your website and the implementation on your end. Usually, we don’t recommend using any custom code to modify our plugin behavior. It may conflict with your existing environment or after the next plugin update release.

Thanks for understanding me.

Best Regards,

Arif

@faithcoder of course.

Anyway, ill provide further screnshots of what I meant.

As i do some dev myself, this change wont affect it probably in any way, and probably ever ??

Its just a quick patch on the users client side end to enable the delay of mega menu loading.

Comparing it to astras pro mega menu feature, they dont use js to determine the difference between first item and left-most point of the screen and shift the layout, but rather they just position it relative to the complete header itself. So in the end, they avoid using Js for positioning which is far more effective.

Thank you for the support and suggestions

Hi @guev4ra,

Thanks for letting us know about Astras pro mega menu feature and you guidelines. I will inform the matter to our Dev team.

I really appreciate your kind cooperation on this matter.

Thank you so much.