[Resolved] Problem with mobile menu

Home Forums Support Problem with mobile menu

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

    Menu Problem

    #953865
    David
    Staff
    Customer Support

    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;
    }
    #954272
    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.

    #954446
    David
    Staff
    Customer Support

    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.

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

    #954699
    David
    Staff
    Customer Support

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.