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

Home Forums Support how to make a simple responsive header that won’t fail content layout shift

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1364140
    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

    content shift

    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

    #1364175
    David
    Staff
    Customer Support

    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

    #1365339
    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

    #1365909
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Thanks!

    #1366193
    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.

    #1366936
    Tom
    Lead Developer
    Lead Developer
    #1367148
    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.

    #1367211
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.