Mobile Menu toggle on not showing the menu

Hi @thesergant,

I’ve checked onedayitinerary.com on my mobile and the menu is working at the moment. It would be great if you could make a screenshot of what you are seeing and upload it to Snaggy so I can take a closer look.

Thanks!

Hi @gemmaevans

it is not working on mobile for me in multiple browsers, I have made a screen recording as I think it is easier to demonstrate what the issue is.

Here is the link to the video.

https://ufile.io/ahd28v3u

I have also uploaded a screenshot https://snag.gy/oEzXxW.jpg

but I am not sure how well it will illustrate the problem, basically if the mobile menu is clicked it does nothing, just changes the colour of the menu and remains like that, it should open a dropdown.

Thank you very much @gemmaevans

Hi @thesergant,

Thanks for the video, that helps a lot. I still haven’t been able to replicate this behaviour on my end though:

https://cloudup.com/cr0IXtOHEub

Does the same problem occur on the Apostrophe demo site menu, or does that one open for you?

Also, which browser, device and operating system are you using? That information can be found on supportdetails.com.

Hi @gemmaevans

I have talked to my colleagues and they are all experiencing the problem, and it is from different devices.

I’ve checked now from and Android device and the menu just changes colour and doesn’t open anything, this was from Chrome mobile browser.

Also in iOS I’ve tried with Safari and Chrome with the same results.

Same in browser on desktop on macOS in mobile in a responsive mobile window. I took the screenshot I sent above from desktop in mobile mode.

And on the Apostrophe demo site it works fine from iOS, no issues whatsoever.

It’s a really strange bug.

Hi @thesergant,

I tested the site again today and the menu icon is no longer working for me at all — which means the behaviour is consistent for both of us. Have you made any theme or CSS modifications since my last reply?

And on the Apostrophe demo site it works fine from iOS, no issues whatsoever.

If the menu on the Apostrophe demo site is working, this points to an issue unique to your site (rather than a general theme issue).

As a starting point, could you try commenting out any custom menu CSS you have added? If the menu starts working, add each selector back in turn, testing as you go. You should then be able to see which CSS breaks the menu.

I’ve found the issue here.

it seems that in the apostrophe 1 theme, the navigation.js toggle class is set to activate a class toggled-on , while the class in the themes style.css is toggle, so once the javascript adds that class to the element, nothing happens because it is applying a wrong class.

Seems to be an issue here on mobile as well, but it looks like it’s a different thing.
https://www.ads-software.com/themes/apostrophe/

Hope this helps.

• This reply was modified 5 years, 5 months ago by thesergant.

The original Apostrophe theme has not been updated in 2 years. That could certainly be your problem.