Archived topic
Jump effect when using navigation as header
6 replies · Started by André on December 26, 2020
Hello,
I have been struggling with this issue for some time, but I can’t figure it out.
I have a “jump” effect when using navigation as header. I have used his tutorial https://docs.generatepress.com/article/navigation-as-a-header/ and tried a lot of things to solve it, but I still can’t.
Can you please check this video, as it is the easiest way to explain it?
https://www.loom.com/share/1710fe4352eb4e30ba350739446549eb
Do you see what happens with the last menu item “Workshop”? It looks that it doesn’t fit, goes to a second line and then adjusts. And I get this “jump” effect.
I have tested different browsers and it’s worse in Chrome and Safari (in big screens in Safari it actually stays in a second line on the left). Also in Chrome mobile I get that big “jump”. In FireFox I get a “jump” left to right.
I believe the problem is in the logo, because if remove it it looks that the issue doesn’t happen. Also, it does not happen when I am loged in on my WP panel.
This is the site https://www.tempodeviajar.com/
Thanks for your help!
Hi there,
Can you try disabling WP Rocket and any other caching related plugins first?
Hi Leo,
As suggested, I disabled WP Rocket and the "jump" effect issue seems to be gone.
So, what now? Should i totally stop using WP Rocket? Altought Im planing to ditch WP Rocket and use only SG Optimizer - plugin from SiteGround hosting, I dont like to be "forced" to do it for this technical reason).
Or should I look for which setting in WP Rocket causes the issue? Any clues?
I actually had both WP Rocket and SG Optmizer active and have read some posts about that sometimes they dont work very well together. Can this be the case?
A few more testing (Chrome, FireFox and Edge) with both WP Rocket and SG Optimizer deactivated and I get this results. I couldnt test it on Safari.
- The "jump" issues is definitly almost over
- It still happens when I first open the browser and open the site, but not after once I i'm on the site and navigate to other pages
- In FireFox, I still get the “jump” after I start navigation, but only when refreshing a page and not when I navigate to other page.
Does this helps to understand the issue further? Or maybe this is just normal browser behaviour now?
Thanks
Or should I look for which setting in WP Rocket causes the issue? Any clues?
I would say that's a good place to start - if you show the issue to their support team, I'd assume they can tell you the exact setting that's causing the issue.
If you are still having the issue after disabling WP Rocket, then try disabling all plugins except GP Premium to test.
Hi Leo! Just to give an update about this issue that can be useful for future reference.
I have disabled WP Rocket and the issue is gone. I also contacted WP Rocket support, that gave me this answer:
"It looks like a FOUC induced by lazy loading the logo image. Would you mind trying to exclude the logo from lazy loading? You can do that by adding the following to WP Rocket > Media > LazyLoad > Excluded images or iframes: logo-tempo-de-viajar-200.png"
I didnt follow-up on this and did not try the fix suggested because I'm now using SG Optimizer only and I'm happy with results, so I will probably ditch WP Rocket for the time being. But I felt confidance in their answer :)
Cheers!
Awesome.
Thanks for reporting back!
