[Resolved] how to make a simple responsive header that won’t fail content layout shift

[Brandon]

I’ve been unable to find the right combination of settings to make a simple responsive header with our logo, site title, and nav menu that looks roughly the same on different screen sizes. I’ve tried using Elementor but get the same results.

The logo changes size at different rates than the site title and nav menu for different screens.
The logo is 144px x 144px. Would it help to have a smaller logo?

Google has been complaining that our content is shifting. When I run PageSpeed Insights it shows several things that are causing the content to shift as the page loads. The successive images show the nav menu/header changing size “at times”. The initial screen shot shows a much larger header. I loaded the screen shot to Google photos for you.

https://photos.app.goo.gl/a8PkiQuFxKovsVxR8 or

One of the issues is that Google is using a mobile device size of 320px. GP is using something larger so when I change all the settings what I see using GP it looks great but when I check using 320px the hamburger is wrapped around to a second line. Is there a way to make everything shrink at the same rate and stay on one line.

I’ve set the mobile breakpoint to a value where when the screen size reaches a width that would require the navigation to wrap it switches to a hamburger. Even with this the hamburger wraps at 320px.

I’ve looked at your header / nav documentation but this is a different issue. I don’t have programming knowledge and have spent many hours/days tweaking settings without success.
Thanks for any help.
Frank

[David]

Hi there,

i am unable to access your site – i am receiving Access Denied.

Are you using a lazy loader ? If so temporarily disable it to see if that resolves the issue. If it does, look to see what options the plugin has for excluding the logo image. Let us know

[Brandon]

Thanks for the response. I apologize for your access being blocked. I had asked our server to block traffic to the site from outside the US since none of our business comes from outside the US. You can use a US proxy to gain access. I deactivated lazy-load and it actually made it worse happening almost every test using pagespeed insights. I reactivated lazy-load and I looked at the page source code. Nothing in the header is being lazy-loaded. At times there appears to be two headers loading momentarily making the shift even larger. I removed the logo from the header on mobile and only have the firm name and nav. It still happens. Thanks, Frank

[Tom]

Hi there,

Can you disable any caching plugins (including Autoptimize) so we can inspect the code?

Thanks!

[Brandon]

It turns out there was some inline css within autoptimize that was causing part of the issue. Thank you. I’ll try to re-add the BB on mobile and see what happens. I deleted the css and turned autoptomize back on. I may still need some help. So far testing using pagespeed insights looks better.

[Tom]

Sounds good! 🙂

[Brandon]

Thank you for the support. Much appreciated. It’s not perfect but much better since it isn’t shifting content. I’ll mark this as closed. Thanks again.

[Tom]

No problem!

[Author]

Posts