My client is getting frustrated that the mobile menu apparently gets stuck on. I instructed her to simply tap on the hamburger icon again as it acts like a toggle switch but this not intuitive to users. Is there any code I can add that would make the mobile menu disappear if the user taps outside of it?
AND is there a way to make the mobile header sticky?
Hi @kcostellomak,
That is the default behavior of the mobile hamburger menu. You have to tap it for it to respond as that is how you do it on mobile devices if you want things to trigger. Also, I am not sure how the mobile menu is intuitive because when you tap it to open the menu, the menu icon becomes X which suggests to tap it again to close it:
If you want to alter the default behavior of the element it could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. Pro is quite extensible with child themes, so there are plenty of possibilities.
You can edit the setting of the mobile bar and enable the sticky bar option:
Hope this helps.
I was wondering if I could make just that hamburger element sticky not the whole header.
And regarding the video you showed above, my hamburger menu does not turn into an X when the menu is open. Is there a way I can change that? That would give it the intuitive feel I am after.
Thank you.
I figured out the sticky mobile menu. I made a static and a sticky mobile menu and made only that menu icon visibile on sticky.
I do, however, still not see the x on the menu window when it is open. On the computer yest but not on my iPhone.
Hey @kcostellomak,
After making the site changes please clear your browser cache on the iPhone too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your iPhone browser.
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.