Archived topic

Mobile menu below logo after reloading the page

12 replies · Started by Jasmin on May 9, 2019

Viewing posts 1–13 of 13

May 9, 2019 at 2:37 am #893812

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

May 9, 2019 at 4:21 am #893882

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

May 9, 2019 at 4:59 am #893914

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.

May 9, 2019 at 6:13 am #894004

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

May 9, 2019 at 10:42 pm #894849

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.

May 10, 2019 at 3:17 am #895024

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.

May 10, 2019 at 5:13 am #895120

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.

May 10, 2019 at 5:18 am #895123

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

May 11, 2019 at 3:56 am #896057

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 :-)

May 11, 2019 at 9:37 am #896373

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 :)

May 13, 2019 at 1:47 am #897577

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

May 13, 2019 at 4:42 am #897682

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 🙂"

May 13, 2019 at 8:58 am #898067

Strange, I'll do some tests on it.

Thanks for reporting back! :)

This archived topic is closed to new replies.

Start building better websites today.