On iPhone 5 and Samsung Galaxy S4, I click on the menu icon to reveal the main menu (mobile viewport). This menu only works if the link is to another page. This menu does not work too well for one-page links. It only partially works.
What Works:
Clicking on a one-page menu link auto-scrolls down to the a-named anchor spacer, as intended, but it’s hidden behind the mobile menu, so users never see that their page element has loaded/arrived.
What Doesn’t Work:
Clicking on a one-page menu link does not close the mobile menu. Yes, it’s still scrolling to the target spacer behind the mobile menu layer, but if the user never sees the scroll-to navigation happening in the background because the mobile menu in the foreground is hiding it, then the user assumes that the website is broken.
Solution:
How do I make the mobile menu automatically close when a one-page link is clicked, so that the user can see the destination they were clicking to?
Also, on another note, if I don’t want the search field to appear in the mobile menu, how do I remove or hide it?