Mobile Menu is opened by default on some resolutions

Support
#1

Hi,

please see here on our website that when you view it in e.g. 1024 x 1366 (iPad Pro with Google Chrome Tools) the mobile menu is opened and it isn’t possible to close it. On lower resolutions (e.g. iPhone) everything’s fine (mobile menu closed and “burger button” is working).

Any help for this would be great! Thank you!

#2

Hi there,

There seems to be a code added in the custom CSS that is forcing the mobile menu to show up :

It is in the media query: @media (max-width: 1100px)

.x-nav-wrap.mobile {
    display: block;
}

Kindly try to remove it and clear your site’s cache.

Thank you.

#3

Hi Jade, thank you for your quick answer.

I set up a staging site here and commented out the code in the child-themes style.css

/*.x-nav-wrap.mobile{display:block}*/

Nothing changed. I cleared the cache.

#4

Hi there,

I checked the link you have provided but it is asking for a login access.

Kindly provide us with the page access including the admin logins in a Secure Note so that we can check your site.

#5

Ah sorry, I added secure note to the post above now.

#6

Hi again,

I checked your setup and I see you’re using CloudFlare’s rocket loader, always make sure to clear cache after making any change. It is recommended to turn off the cache plugins / optimization services while you’re developing your site so you can see the change on the front-end right away.

Please clear you Cloudflare’s cache and test the site again. Also I noticed you’re using an old version of X and Cornerstone. Please update both to latest versions. You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Let us know how this goes!

#7

Thanks for your answer.

It’s incorrect that you’re saying we’re using old versions of your theme. I double checked right now and we’re using X 6.0.4 and Cornerstone 3.0.4.

BUT: You seemed to be right with Rocket. I deactivated it on stageting and now the mobile view error mentioned above seems to be fixed. Can you please verify? Thank you!

#8

Hi,

Yes, I can confirm that your mobile menu works now.

See Video - https://www.screencast.com/t/I8rQtJGTrZr

Thanks

#9

Sorry, for the late reply. On my end it’s not fully working.

Yes: Mobile menu is closed now BUT I can’t open it anymore by clicking.
This error only occurs on 1024x1366 (iPad Pro). Below this size (e.g. iPad 768x1024) it is working fine.

#10

Hi There,

To fix this issue, please add this custom CSS:

@media (max-width: 1100px){
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
    .x-nav-wrap.mobile {
        display: block;
    }
}

Hope it helps :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.