[Resolved] Mobile menu below logo after reloading the page

[Jasmin]

Dear team,

thanks again for your awesome theme! On my page the mobile menu at first appears on the top right. When reloading the page on mobile devices it moves below the logo. I would like to have it always on the top right. I already noticed that the issue disappears when I deactivate Autoptimize. I do not manipulate the menu with css, however, I also tried to exclude my child theme’s css from Autoptimize, but this doesn’t solve the issue.

Thank you in advance.
Jasmin

[David]

Hi there,

i just tested the site and have not been able to replicate the issue, sometimes the autoptimize cache gets scrambled and re-orders the CSS which may have been cleared.

You can try adding this to the autoptimize exclusions:

mobile.min.css

[Jasmin]

Hi there,

thanks for getting back to me. I excluded mobile.min.css, but it doesn’t help. I can see the behavior in Chrome on iPhone6. When I delete the browser cache, it looks good again, but when I reload the page, the menu goes below the logo again.

[David]

Which lazy loader are you using as this may be the issue? Can you test by disabling that and flushing caches etc.

[Jasmin]

Disabling Autoptimize’s lazy load feature and flushing cashes resolved the issue. So I should probably try a different lazy load plugin or do without it for now.

Thank you very much, David!

PS: Frank told me to try to exclude icon-home from lazyloading, but it doesn’t help either.

[David]

In the Autoptimize settings you can exclude images by class or file name.
The class for the logo would be header-image if that doesn’t work then add the image filename instead.

[Jasmin]

I tried header-image, the image filename of both logo and the background image, but it didn’t help. I thought, Frank means the icon with the bars. Fortunately he seems to be interested in investigating. We are still testing different Autoptimize settings. (https://wordpress.org/support/topic/lazy-loads-lead-to-switching-mobile-menu/#post-11517396) I will keep you posted if we find a solution.

[David]

right – so ignore the image.
Did you try excluding the CSS file he mentioned?

[Jasmin]

Hi David,
yes, I tried everything, but nothing has helped so far. But Frank seems to be interested in digging deeper to find a solution 🙂

[Tom]

Frank is great – I’m sure he’ll find the issue. Let us know if it’s something we need to fix on our end 🙂

[Jasmin]

Thanks, Tom! We are still testing. I just found out that the issue disappears if I exclude png images in general. Let’s see 🙂

[Jasmin]

Hi David, hi Tom,

Packlisten-logo-neu-60.png turned out to be the problem file which has to be excluded from lazy loading in Autoptimize. It is the logo in the floating header which I had not thought of. So we were close when testing the exclusion of the (main) logo…

So in case other users have problems, they should try to exclude this file.

Frank’s comment: “I *think* the issue is a bit more complex, as it only occurs in mobile on iOS (well, I haven’t been able to reproduce an Android or in a desktop browser emulating mobile at least). So it looks like the CSS applies differently on webkit (the basis of all iOS browsers) when lazyload is active on that image in the header. Maybe because that image is present twice in the HTML? 🙂”

“And tell Tom of GeneratePress to reach out to me if he needs any input from me, I’ll be happy to help 🙂”

[Tom]

Strange, I’ll do some tests on it.

Thanks for reporting back! 🙂

[Author]

Posts