Fixed Nav Behaving Erratically on Mobile

Hi, I have a nav that is placed in a global block that encompasses two sections, one for my Desktop nav and another for my mobile nav. The mobile nav I have set to be fixed with custom CSS. It is all fairly straight forward, you can view the site at https://mycriticaldisplay.com/. However, I had complaints from my client that the logo in the nav was not showing on mobile (both safari and chrome). I could not replicate the results. I then updated my iPhone to 15.5 ( was using 14.8) and I started to see what they were talking about. The logo disappears, and the nav height increases. However, I can refresh it a few times and it starts working properly but then as soon as you refresh it again, it’s back to what it was. It’ extremely frustrating becausing anything I do, It continues to the same eratic behavior. Any help would be greatly appreciated.

Hello Dan,

Thanks for writing in! I have inspected your site and it seems your issue is related to caching. I can see that you have installed Bat Cache and Jetpack plugins. Be advised that if you have enabled the Site Accelerator (in Jetpack) and then your Bat Cache cahes the unloaded image, this usually cause an issue. Can you please temporarily deactivate both plugin and test your site again? You may also need to clear your browser cache or use private browsing mode before testing your site again.

It could also be caused by other plugin conflict or custom JS coding. Please troubleshoot with the following:

If nothing else helps, we would love to investigate further and check your site settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Hi Ruenel,

Thanks for taking a look. I do not have Bat Cache installed. I had Breeze installed, which I had disabled… the problem continued. It does not seem like I can disable Jetpack and can’t find the site accelerator option your are talking about.

Also, whenever I am working, I always view my changes in private browser exclusively.

I disabled all my plugins except for Cornerstone and the issue continued. However, the disabling default ‘site optimize’ plugin did seem to help slightly. (The nav looks normal more often than not on the home page), but still breaks randomly. Secondary pages are still broken most of the time.

I will create a secure note for you to investigate further.

Hello Dan,

Your Breeze plugin and the Jetpack’s Performance setting is still enabled.

You may need to temporarily disable them while you are troubleshooting for better results.

Kindly let us know how it goes.

Hi @ruenel, my apologies, I did have them turned off while troubleshooting but reactivated them once it was clear they were not causing the issue. I have had them turned off for over 24 hours now and the problem still persists.

It seems this issue is only happening on IOS operating systems. Android systems appear to be unaffected… as far as I can tell.

Any additional help would be greatly appreciated. Thanks!

Hi Dan,

Can you please mention the device, browser version, and also operating system version you are using, that helps us to replicate the issue at our end. If you can please provide any video that will help us more to recognize the problem.

Thanks

iPhone 12 pro, IOS 15.5, I am using Chrome 83.0.4103.88 in the screen recording below, however, the issue is seen on multiple browsers ranging from Safari to DuckDuck Go.

Here is the link to the video which highlights the erratic behavior: https://videos.files.wordpress.com/DtDpiV53/rpreplay_final1653486293.mp4

Hey Dan,

It looks like the latest versions of iOS does not work well with fixed position elements.

Please note that this is not an issue with our theme and we do not support modified elements like your Section’s custom CSS.

To fix the issue you’re having, you need to find an web coder who is an expert in fixing CSS issues in iOS.

Thank you for understanding.

Hi Christian,

After much research, I agree, the fixed position property doesn’t jive well with IOS 15 without some fairly specific intervention.

However, I am still having issues. I removed all the custom CSS to fix the nav to the top ( the client said they were fine with it not having it fixed on mobile) and I am still getting sporadic behavior. Sometimes the nav bar loads perfectly normal, other times the logo is removed and the nav bar increases in height. Just as it was before, except I removed all custom CSS, so I’m not sure how this couldn’t be an issue with the theme/cornerstone.

It’s not a image size issue either as sometimes even the heavier graphics load but not the logo…

So to summarize, I removed all my custom CSS and the issue continues to persist. I would appreciate further investigation into the issue that I am having.

Thank you

Hey Dan,

I see you’re using Jetpack Lazy Loading. Please disable that then clear your browser’s cache then test again.

Note that none of our products have a capability to hinder image loading.

Thanks.

1 Like

Christian, THANK YOU!

Turning off Lazy Loading seemed to resolve all my issues. I was even able to reimplement my custom CSS to fix the nav to top of the page and everything is working now as expected.

I truly appreciate the help and all your guys’ patience.

Dan

You are most welcome, Dan.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.