Archived topic
Logo in the header moves quickly when I click around site
8 replies · Started by Andrew on January 25, 2022
Hello,
I noticed that when I navigate to different pages on my site on desktop, the logo moves slightly to the right and then back to the left when each page loads. If you go to my homepage on desktop and click on any of the links, you'll see the logo move when the new page loads.
Is there any way to fix this so the logo sticks in one spot and doesn't have that quick movement?
Thanks,
Andrew
Hi Andrew,
Are you using any caching or optimization plugins?
If so can you try disabling first?
Yes, I'm using WP Rocket. I just disabled it and cleared my server cache too. Still seeing the issue.
Just wondering, does this issue happen with all plugins disabled except GP Premium?
There isn't anything we can do from our end unfortunately - the header padding etc are exactly the same on all pages.
The small change you are seeing is just the browser scroll bar being loaded.
I disabled all plugins on my staging site and the issue still occurs.
If it's just due to the browser scroll bar loading would it be happing on every website? I did notice that it only happens on desktop and on Google Chrome.
As I further test it, it looks like all the items in the navigation menu move in addition to the logo.
Any other things I could look at to troubleshoot?
Thank you.
My hosting company looked at it and said:
"After checking into this a bit it seems to be simply related to the order & speed at which your CSS / Styling files & code are loaded into your site in relation to the actual content (HTML Code). For me, the adjustment lasts under a second and very quickly finishes loading. Unfortunately, the only way you'd be able to fully resolve this is to work with a developer who would be able to log in and work on the theme's code that you're using to organize the CSS files to load in a specific order that will force the styles of the website & header to load in the very first position as opposed to other stylings & the content itself."
If this is the case, would you be able to help me figure out which CSS needs updating?
Hmm I can't see how this is a GP issue as I don't see it happening in any of our sites here:
https://generatepress.com/
https://gpsites.co/shop/
https://gpsites.co/crypto/
https://gpsites.co/search/
You can test any of our site library templates using the URL examples above:
https://generatepress.com/site-library/
We are using Autopimize with the suggested settings and that's it:
https://docs.generatepress.com/article/configuring-autoptimize/
I think I figured it out. I added the CSS below so that the scroll bar always shows. And it looks like that did the trick. Does it look fixed on your end? Thanks so much for taking a peek.
body{
overflow-y:scroll;
}
Yup that works for me!
Cool idea :)