Menu button not working on mobile

Hi,

The menu button (3 lines) on my home page has stopped working specifically on mobile.

When the page loads the button is not clickable and maybe after scrolling up and down a few times it becomes clickable. I can access the menu fine on desktop.

I haven’t installed any new plugins in a while so I don’t believe it’s caused by a plugin.

Could you please provide a fix?

Website: www.thetimeless.com.au

Thanks in advance.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width:767px){
            
      .header-wrap .container{
        text-align: left;
      }

      .header-wrap .btn-menu{
        float: right;
        margin-right: 15px;
      }  

      .header-wrap .col-md-4 {
        max-width: 90%;
        position: relative;
        z-index: 2;
      }

      .header-wrap .col-md-8 {
        margin-top: -50px;       
      }        

      #mainnav-mobi {
        top: 70px;
      }
      
    }

Let me know how it goes.

Regards,
Kharis
aThemes Support

Hi Kharis,

Unfortunately the issue is still there and I have to scroll down a little bit first for the button to become clickable. Also now there is a white space between the header and the loaded menu when I do manage to click it after scrolling down a bit.

I’ve also cleared the cache on my phone.

Hi All,

Just following up on this to see if there was any progress.

Thanks,
Pouya

Hello there,

My apologies for the delay in response.

Please try adding this extra CSS code:

    @media only screen and (max-width: 767px) {
      .site-header.float-header {
        padding: 20px 0;
      }
      .site-header #mainnav-mobi {
        top: 55px;
      }
    }

I hope this reply helps. Let me know how it goes.

Stay safe.
Have an excellent day ahead :slight_smile:

Regards,
Kharis
aThemes Support

Hi,

The code fixed the white space issue so thanks for that. But my original problem which is the menu button not being responsive on mobile on any page when it loads first is still there. If you could please assist with that it’d be much appreciated.

Hello there,

As checked on your site’s source code, it seems likely script compression and caching cause you this issue. I request you to temporarily disable them and check if it resolves the issue.

Stay safe.
Have a nice day :slight_smile:

Regards,
Kharis
aThemes Support

Hello! I am having the same issue in my website (www.flap.rio).

The menu button is not clickable on mobile, only after scrolling down and up again (we are trying on iPhone, iPad, chrome, safari and Firefox)
We have already tried to add the CSS mentioned above and even tried to add some JavaScript code but nothing seems to work.
I have 3 websites with Sydney pro and basically the same plugins installed, I am only having problems with this specific website and I have already tried to disable the plugins and it still the same.

Please let me know how should I proceed.

Hi Pedro,

Thank you for chiming in.

I checked your website with my Safati, Chrome, and Firefox on my iPhone; and the mobile menu is working properly.

Here is the screenshot taken with my iPhone.

Perhaps it is just a matter of cache issue at your end. I’d request trying to clear cache/history on mobile web browsers and before visiting your website.

Regards,
Kharis
aThemes Support