Our client recently noticed that on mobile, the small CTA box + page title text shifts up into the nav menu. However, once you touch the screen and/or scroll, the mobile layout shifts into place. Our team has been trying to figure out the reason for this effect...perhaps due to parallax? We were hoping you could help us pinpoint the issue so that the CTA box + page title text sits beneath the nav menu on mobile on the initial page load for mobile.
I've attached 2 screenshots to show the layout issue in "before" and "after" mode.
Looking forward to your response, thanks so much!!
After doing the recommended changes, it looked fine on Google Chrome's Devtools inspector, but on the actual mobile device, the header still pushes up against the navigation menu. Once you touch the mobile screen, it will then reset so the header titles have the correct spacing/height under that nav menu.
The homepage has the same behavior as well. I'm not quite sure what we can do to resolve this? Screenshots attached and links below.
I turned off WP Rocket's Lazy Load in favor of Salient's Lazy Load feature (cleared cache after settings adjusted) and that did not help. Please see screenshots attached labeled "Salient-LL".
I think this has to do more with the Delay JavaScript execution. When I disable this feature via WP Rocket for an individual page, the mobile view loaded with all elements in place (not fragmented like before) but then our GTMetrix scores reported an E/F.
I then enabled the JS Delay Beta feature that the Salient theme has for all devices (very cool!) and disabled the global JS Delay with WP Rocket... and the mobile view loaded with all elements in place - see screenshot labeled "JS-Delay"- - - but again, the GTMetrix scores are ranking in at a D/E.
I'm not sure what other ideas your team may have but based on these tests these seems like a JS loading issue. Thanks for your help in troubleshooting this !
I would recommend keeping the Salient theme option enabled for "Delay Javascript Execution" enabled on all device, and then still turning on the same option within WPRocket, but exclude the theme.
That way Salient can correctly handle its own scripts and WPRocket can still take care of all others. Here's a screenshot of the exclusion rule i'm referring to within WPRocket:
Hi there,
Our client recently noticed that on mobile, the small CTA box + page title text shifts up into the nav menu. However, once you touch the screen and/or scroll, the mobile layout shifts into place. Our team has been trying to figure out the reason for this effect...perhaps due to parallax? We were hoping you could help us pinpoint the issue so that the CTA box + page title text sits beneath the nav menu on mobile on the initial page load for mobile.
I've attached 2 screenshots to show the layout issue in "before" and "after" mode.
Looking forward to your response, thanks so much!!
Attached files: before.png
after.png
Hi there,
The issue is being caused by the animated title "About our team" not finishing its animation on the page until you touch \ scroll a bit.
Could you maybe try to use a different element for now as the animation cannot be disabled, just changed to a hinge drop?
Also, disable the animation on the custom heading element under it and see if this improves things.
Cheers.
Hey Noah,
Thanks for the suggestions! If I have any additional issues or questions, I'll loop back.
Hi again,
After doing the recommended changes, it looked fine on Google Chrome's Devtools inspector, but on the actual mobile device, the header still pushes up against the navigation menu. Once you touch the mobile screen, it will then reset so the header titles have the correct spacing/height under that nav menu.
The homepage has the same behavior as well. I'm not quite sure what we can do to resolve this? Screenshots attached and links below.
https://stpetecriminaldefense.com/
https://stpetecriminaldefense.com/about/
Please advise when you can thank you!
Attached files: IMG_3976.png
IMG_3975.png
Hey Again,
Could you try using our optimization features instead of WP rocket and check :
Thanks.
ThemeNectar Support Team
Hi Tahir,
I turned off WP Rocket's Lazy Load in favor of Salient's Lazy Load feature (cleared cache after settings adjusted) and that did not help. Please see screenshots attached labeled "Salient-LL".
I think this has to do more with the Delay JavaScript execution. When I disable this feature via WP Rocket for an individual page, the mobile view loaded with all elements in place (not fragmented like before) but then our GTMetrix scores reported an E/F.
I then enabled the JS Delay Beta feature that the Salient theme has for all devices (very cool!) and disabled the global JS Delay with WP Rocket... and the mobile view loaded with all elements in place - see screenshot labeled "JS-Delay"- - - but again, the GTMetrix scores are ranking in at a D/E.
I'm not sure what other ideas your team may have but based on these tests these seems like a JS loading issue. Thanks for your help in troubleshooting this !
Attached files: Salient-LL-1.png
Salients-LL-2.png
JS-Delay.png
Hey Again,
Escalating this to the developer for further response.
Thanks.
ThemeNectar Support Team
Thank you! I'll be on standby!
Hey conversations
I would recommend keeping the Salient theme option enabled for "Delay Javascript Execution" enabled on all device, and then still turning on the same option within WPRocket, but exclude the theme.
That way Salient can correctly handle its own scripts and WPRocket can still take care of all others. Here's a screenshot of the exclusion rule i'm referring to within WPRocket:
Kind regards
Hey ThemeNectar!
This configuration worked and did not interfere with the GTMetrix scores. Thank you so much!
Kind regards,
Cristina from conversations :)