[Resolved] Problem with mobile menu

[Ryan]

I can’t figure out what is causing this. It only happens on the iPhone, and only when initially loading a page. After scrolling down it fixes itself and sometimes it doesn’t happen. The hamburger menu will drop below the logo icon instead of to the right of the search icon. I will add a screenshot to make this clear. It’s hard to test for because it doesn’t happen in a desktop browser. Thanks for the help.

[David]

Hi there,

could be a CSS caching issue that is scrambling the initial CSS you can test it by flushing and disabling any caches – to counter it happening try adding this CSS:

#mobile-header .inside-navigation {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

[Ryan]

I tried adding your css to my child theme. I had to add nowrap!important for it to override the default css. But that actually causes the menu label to drop below the hamburger icon. The default css had flex-wrap:wrap on that div. I’ve tried clearing all caches I can’t figure out why the issue only shows on the iphone.

[David]

Actually i didn’t spot this before – you have a lazy loader that looks like it is messing with the logo width on initial load. Can you disable it and see if thats the case. If it is then most lazy loaders have an option to exclude certain images sometimes with just the filename of the image.

[Ryan]

Thanks, yes that was the problem. I’m using wprocket which is very popular and it’s built in lazyloading so it might be something you could check to see if it could be made compatible. I’ll look into if there is a way to disable it on that image. Or I might just remove the image it’s not really important.

[David]

It is related to how WP Rocket adds there placeholder there seems to be a minimum size which we can’t account for. They do provide these methods to exclude:

https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

Using the name of the image is the easiest method.

[Author]

Posts