I am writing to address an unusual issue on my website. I have created a video to illustrate the problem:
I have conducted some research to resolve this matter, but unfortunately, I have not been able to find a solution. I would greatly appreciate your assistance and prompt response. If possible, kindly provide me with some pointers to enhance my investigation.
Website link:
Thank you for your attention to this matter. Have a wonderful day.
Since you didn’t include a “read only link” to your Webflow build it’s tough for most people to help you here. (How to Enable a Webflow Share Link)
I’ve put together a short video though using Chrome developer tools. You can see your elements disapearing on screen and on the right you can see the code changing as we move over the breakpoint.
The important thing to notice is that the code changes from “opacity=1” (visible) to “opacity=0” (not visible) in this time. So your elements are still there you just cant see them.
Without seeing your read only link its gonna be tough to explain why this is happening. I would check the opacity setting at this breakpoint first although I think it’s more likely this is due to an interaction being applied at that breakpoint.
Thank you for your prompt response.
Using Google Web Tools is indeed an excellent initial step for investigation.
I am still unsure why the opacity changes from 1 to 0.
Moreover, I have observed that when the menu is in the hover state, the opacity reverts back to 1. It’s quite a perplexing experience.
Thanks for your read only link. I can see that the problem is being caused by a page load animation called “About 1 Page Load”.
This animation is applying the intial state of opacity 0 to your elements and then half a second later gives them opacity 1 for a nice fade in effect when the page loads.
The issue is that the animation is only being applied to the tablet and desktop breakpoints. See image: