Mobile Menu animation not working correctly
-
Hello, I'm building my studio portfolio using Lay Theme and I've been ejoying the system so far. However I'm experiencing an issue with the Mobile Menu sliding animation. I'm using menu style 3 that slides from the top, and i've activated the "do Animation" option but when I invoke the menu if the site is loading still loadint contents the animation will not work, the menu just appear without transition. It's only when the page has been completely loadaded that the animation begins to work. So it's confusing if somene click the menu icon when first arriving to the site and the contents are not fully loaded.
The website is: https://www.awayo.studio
Is there anything I can do to fix this issue? I'm using mobile Safari, iOS 14, iPhone 11 Pro.
Thanks in advance.
-
Dear @srg
I had a thought if you add the specific transition CSS that you need to your <header> so that it loads early on page load
<style> @media (max-width: 650px) nav.laynav.mobile-nav { -webkit-transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); -o-transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); } </style>Added to 'Custom <head> content' in 'Lay Options - Custom CSS & HTML
Let me know if that solves it! :)
Best
Richard -
Dear @srg
I had a thought if you add the specific transition CSS that you need to your <header> so that it loads early on page load
<style> @media (max-width: 650px) nav.laynav.mobile-nav { -webkit-transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); -o-transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); } </style>Added to 'Custom <head> content' in 'Lay Options - Custom CSS & HTML
Let me know if that solves it! :)
Best
Richard -
Dear @srg
I had a thought if you add the specific transition CSS that you need to your <header> so that it loads early on page load
<style> @media (max-width: 650px) nav.laynav.mobile-nav { -webkit-transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); -o-transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); } </style>Added to 'Custom <head> content' in 'Lay Options - Custom CSS & HTML
Let me know if that solves it! :)
Best
Richard -
Dear @srg
I had a thought if you add the specific transition CSS that you need to your <header> so that it loads early on page load
<style> @media (max-width: 650px) nav.laynav.mobile-nav { -webkit-transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); -o-transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); transition: height 500ms cubic-bezier(0.52, 0.16, 0.24, 1); } </style>Added to 'Custom <head> content' in 'Lay Options - Custom CSS & HTML
Let me know if that solves it! :)
Best
Richard -
Dear @srg
Will forward this to make sure you get the right Answer! :)
Best wishes and thank you for using Lay Theme, have a wonderful day and talk soon
Sincerely
Richard -
hey looking into this now, sorry for the wait
-
ok i will release an update later today that improves this!
-
ok i will release an update later today that improves this!
Thank you @arminunruh
It’s working correctly now
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it