Mega Menu w/ Image Carousel - Broken Layout [Brizy Cloud]
Hi,
I added an image carousel on my mega menu but when the website loads, the image size or the mega menu layout are not showing as they are supposed to.
Website:
https://loadnstraps.brizy.site/
I've created a quick video to show the issue on my end.
https://vid.kimlovino.ca/conversations/8fcddbca-e4e8-5343-b5ce-fd4ee970cf22
Thanks
-
Hi Kim
A specific Brizy JavaScript file is being blocked on your homepage. https://jmp.sh/wgJBhWU. Absence of the JS file could be the reason behind the misbehaving mega menu.
The SpreadSimple script that is embedded on the homepage could possibly be blocking the JS file. To check if the SpreadSimple script is blocking the JS file, can you try this? Remove the SpreadSimple embed code from the homepage temporarily and see if the mega menu starts behaving properly.
0 -
Hi KC,
I removed the spreadsimple script and my mega menus are still not functioning properly.
0 -
Hi Kim
Can I take a look at your project to see what is causing the console error? Can you invite me into your project as a Team Member with the Manager role? https://support.brizy.io/hc/en-us/articles/360036481071-Team-Members-Roles
0 -
Okay, I have added you as a team member.
0 -
Hi Kim
In the Brizy Cloud editor, I do see several more console errors. https://jmp.sh/cbWdkkU
We are looking into those errors and will take sometime to study it.
0 -
Hi Kim
I have done some work on your website. The mega menu does not load on the left side like before. However the images in the mega menu carousel takes a while to load. Please check your website now.
I have recreated your homepage at https://loadnstraps.brizy.site/test. This page does not have any console errors
There were few deviations from design best practices. I had to recreate your mega menu and the main menu under Project Settings.
I will try to fix the issue with slow loading of the images in the mega menu carousel as well.
1 -
Hi KC,
Thanks for looking into this. I appreciate the support.
Are the errors mainly because of the mega menu design?
Just wondering - what's the best way to show a GIF/video in the homepage? I used lottie since it's the highest quality I can use without the file being too big. And I didn't want to use a GIF directly because the file can go bigger than 3mb and I guess bigger than that, it seems I can't upload. And using a .webm, the file doesn't autoplay as I want it to.
Kim
0 -
Also, I embedded the spreadsimple script back on the homepage
0 -
Hi Kim
There were some issues in the way menu was created and how the mega menu was implemented.
I would say Lottie is a very good way to present an animation on your homepage. In the hero block where you have added the Lottie animation, there is a carousel behind the Lottie element. If you remove this carousel behind the Lottie element, the console error will disappear.
In the test page I had created, I have already removed the carousel behind the Lottie element. If you like you can also save this hero block and reuse it in the homepage
0 -
I see. thanks for figuring that out! I forgot I had that carousel there since I was planning on having multiple GIF but then it affected the site speed so I just left it with 1 lottie instead of a GIF.
It seems when I reload the page the image in the carousel in the mega menu takes a while to load. Any fix to this?
Thanks
0 -
Hi Kim
The images in the carousel of the mega menu seems to load slow even on another project when I tested. I may not be able to help you improve the speed.
Instead of using a carousel, displaying three product images side by side in three columns within the mega menu could be a possible solution.
0 -
Okay thanks for checking that out for me. I'll maybe just have 1 picture on the mega menu for now.
If there's any update with regards to the carousel image speed, please let me know.
Thanks
0
Please sign in to leave a comment.
Comments
12 comments