Mobile menu is not collapsed

Hi all,
After upgrading Sydney to 1.72 few days ago, the mobile menu is not collapsed but always fully visible. I tried using your other support cases when you suggest to add script to footer but it doesn’t help. Can you please help?


Thank you,
Andrew
1 Like

I am seeing this same problem on mobile devices. Please help! https://stantononline.com/

Hi,

It seems likely you have cache issue since we have updated the code for mobile menu in the newer version of Sydney.

I’d request you clearing the website cache (if it is applied). You’d also have to clear history, cache, and restart your mobile web browser. Then reload your website.

Regards,
Kharis
aThemes Support

Hi Kharis,

Thank you for your reply. I did as you recommended but still an issue. See picture - it happened on safari and edge

Hi there,
Do you have an update on this issue? The mobile menu is still expanded.

Hi,

I checked your website again and still don’t have any cluse the cause of this issue. But, you would be able to resolve it by adding the below CSS code to your website’s Additional CSS under the Customize menu.

    @media only screen and (max-width: 1024px) {

      .site-header #mainnav-mobi,
      .site-header #mainnav-mobi:not(.toggled) {
        display: none;
      }

      .site-header #mainnav-mobi.hidden.toggled,
      .site-header #mainnav-mobi .sub-menu.toggled {
        display: block !important;
      }
      
    }

Please give it a try, clear cache before reloading your website, and let me know how it helps.

Regards,
Kharis
aThemes Support

Hi Kharis,
Unfortunately it doesn’t help. Do you have any other solution? Thank you in advance.

The first solution provided to clear all the cache on both ends didn’t work, but the custom css that was recommended seems to have worked on my site. I also flushed my site cache after adding the css, as recommended. Did you try that @ITBAsolutions?

@kharisblank Why do you think this was necessary? I would imagine that the mobile menu should just function this way (collapsed until selected) right out of the box and not require custom css for proper functionality.

Thanks for your timely support.

Jane

Hi @ITBAsolutions ,

I just checked your mobile menu and it is working fine now.

Here is my screen recording:

Perhaps your network has cache in the background. Can you try with other device with different network?

Regards,
Kharis
aThemes Support

Hi @janiebee83,

I got this custom CSS code presents in your website and it stops the mobile menu. That’s why you need to add my CSS code I recommend.

    .site-header #mainnav-mobi, .site-header #mainnav-mobi:not(.toggled) {
        display: none;
    }

Or you may want to try removing the above code. So you would not need this.

Regards,
Kharis
aThemes Support

Hi Kharis,
You code helped!
Thank you.
I agree with @janiebee83 on why this doesn’t work the standard way after migrating to 1.72 but it’s your domain.

1 Like

You’re welcome @ITBAsolutions!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support

@kharisblank I don’t understand your last response to me. The code you said I needed to find and remove was part of the code that you told me to add. I didn’t see any previous existence of it anywhere.

Hi,

Perhaps I didn’t notice that the code I suggested for you caused another issue. Can you link me to thread or topic where I suggested that code? I’d like to do some corrections in there, if it is allowed.

Regards,
Kharis
aThemes Support

@kharisblank,
It’s all within this same topic. Here is where you gave the code to add to CSS: https://forums.athemes.com/t/mobile-menu-is-not-collapsed/41256/6?u=janiebee83

Then here is where you said that part of the same code was what was causing an issue and if I found it and removed it, I may not need the previous code that you had given as the fix: https://forums.athemes.com/t/mobile-menu-is-not-collapsed/41256/10?u=janiebee83

This is why I’m confused.