Mobile menu does not open

Astrid
#1

Hello,
I really apreciate the Astrid-Theme very much because it is beautiful and easy to use. Unfortunately there seems to be an issue with the mobile menu. After usiing the mobile menu several times (clicking some links), it does not open anymore. In the Inspector of the browser the whole moile-menu-section seems to be missing then, so I can’t use a CSS-workaround. This problem appears not only with some websites I build but also with the demo version of Astrid and Astrid pro.
Is there a solution for this issue?

Many thank in advance,
Till Daniel Müller
PS: Sorry for my bad english :frowning:
PPS: This problem appeard on Firefox, I did not test other browsers yet

#2

HI Daniel,

I am sorry to hear that you’ve run into an issue. I am happy to help out.

Can you share a link to your website here, so I can inspect it directly and help you in a better way?

Regards,
Kharis
aThemes Support

#3

Hi Kharis,
thank You for Your reply. You can reproduce the described behavior with every website with Astrid theme. I just checked it with the demo version of Astrid Pro (https://demo.athemes.com/astrid/shop/) using Firefox on a Surface Pro 6 with Windows 10 or a Chiaomi Redmi 10 Smartphone with Android and Firefox. After navigating a bit on the website using the mobile menu to change between Home, Blog and Shop the menu stops working. The mainnav-section has the id ‘mainnav’ then, not ‘mainnav-mobi’. I can change the id manually to ‘mainnav-mobi’ and it works again.

screenshot_mobile_menu_not_working_on_astrid_pro
screenshot_mobile_menu_not_working_on_astrid_pro2736×1824 645 KB

Regards,
Daniel

#4

HI Daniel,

I am sorry, I can’t get the issue.

Can you confirm whether this issue occurs only when the web browser’s inspector tool is being opened? Can you try refreshing your web browser and visit the demo in normal mode without inspector tool?

Regards,
Kharis
aThemes Support

#5

Hi Kharis,
Yes, it occurs without inspector tools. I get it with Firefox, Microsoft Edge and Chrome, Safari, MII Browser on different computers and Smartphones. With Astrid lite version it occurs more often then with pro. I couldn’t find out yet by which exact circumstances it is triggered.
I get it by opening the theme’s demo version (https://demo.athemes.com/themes/?theme=Astrid), change to mobile view (if the used screen is too large for the mobile menu to show) and click three or four times the menu links.
Regards,
Daniel

#6

Short update:
The issue occurs after uprading WordPress to version 5.6.1. I checked with an older website and it worked fine. After the upgrade I got the described issue.

Regards,
Daniel

#7

HI Daniel,

I checked again, and still the same, that I can’t reproduce the issue. The mobile menu looks fine to me.

Can you confirm whether you’re running the latest versions of web browsers?

Regards,
Kharis
aThemes Support

#8

Hi Kharis,
I tried it with different devices, different operating systems and different (fully updated) browsers. I even asked some friends and colleagues to reproduce the issue, always wih the same result, that the menu stops working after some clicks. For the websites using Astrid theme I solved this issue by surpressing the mobil menu completly and implementing my own mobile menu. I just can’t imagine that nobody else ran into this issue.
Regards,
Daniel

#9

Hi Kharis

I can agree with Daniel. This problem is reproducible even on your Demo-Site. After a view clicks the menu won’t open until you refresh the page or you scroll the content down to the end of the page and then scroll back to the top again… I can reproduce this problem easely on your Demo-Site with iPhone SE (2016), iPhone 11 and iPad Pro with the latest build of iOS/iPad OS and Safari and also on Android Phones like Mi A1, A2 and Samsung A51 (?) each with the latest available Android Build and Chrome.

Regards,

Roger

#10

Hi Roger,

Can you provide a link to your website needing help with here, so I can check it directly?

Regards,
Kharis
aThemes Support

#11

Hi Kharis

Many thanks for your reply. You can go to our testpage https://sties.geckonet.ch
When you click for example on “leitbild” or “produkte” then the menu won’t open until you scroll down to the end of the page and scroll back to the top or you reload the page.

Anyway the problem occurs only on mobile devices like tablets or smartphones (tested on latest iOS/iPadOS and Android 9 and 10). On a pc with a minimized browser-window it seems that all works fine.

By the way our WP version is 5.7.1 and we use the following wp plugins:
antispam bee
contact form 7
flamingo
simple iframe

And yes i deactivated all plugins for testing, but the problem ist still here :frowning:

Regards,

Roger

#12

Hi Roger,

I tested your website’s menu with my phone and I can experience the mentioned issue.

To check whether you’re getting script conflict with one of active plugins, can you try disabling them at once for testing purpose and clearing cache before checking?

Adding, to do this troubleshooting privately, you can enable troubleshooting mode with the help of this plugin.

Regards,
Kharis
aThemes Support

#13

Hello everyone,
To add some information…

I have been having the same issue with my website using Astrid theme (www.jonz.eu) and filed bug reports with Firefox at first which was then moved to Webcompat. Please find the steps to reproduce and more info here https://github.com/webcompat/web-bugs/issues/67865

I hope the issue can be resolved between aThemes and Webcompat teams :slight_smile:

#14

Hi,

I am sorry to hear that you’ve run into an issue with the mobile menu. I am going to investigate it further along with the attached GitHub link.

To check whether it is a site specific issue or not, can you try checking our demo site’s mobile menu?

Regards,
Kharis
aThemes Support

#15

Hello,

Thank you for looking into this further.
I checked your demo site and the exact same behavior occurs.
I’ve used this theme for 3 years now without issues, and there has been no theme update recently to cause these issues. It makes me think something changed with Firefox mobile. I hope you can find the solution!

Kind regards,
Jonz

#20

Helo Jonz,

First thanks for using our Astrid theme and report this issue!

That seems to be a issue with the Firefox, since it works normally in others browsers.

But even so we’ve made a change in the theme code that should resolve this issue and we will be realeasing a new version of the theme still today. Then, please update the theme when it’s available at Appearance > Themes .

We hope this helps!

Kind Regards,

Rodrigo,

aThemes Support

#21

Hi Rodrigo,

The theme update has fixed the issue in Firefox.
Thank you! :slight_smile:

2 Likes
#22

Hello Jonz,

Great the issue is now resolved!

If you need further help feel free to contact us.

Kind Regards,

Rodrigo,

aThemes Support

#23

Hello Rodrigo

The theme update has fixed the issue also on ios/ipad os in safari and on my android devices with chrome. Thank you!

Regards,

Roger

1 Like
#24

Hello Roger,

Great and thanks for let us know!

If you need help, feel free to contact us.

Kind Regards,

Rodrigo.

aThemes Support