Mobile Menu doesn't work for anchor links
giorgioriccardi opened this issue · 2 comments
I'm testing a scenario where there is only 1 single page and therefore the main and mobile menu are structured on a #anchor-links structure: #project, #about, #and-so-on
I did try to use the shortcut url structure /#project and also the full domain path https://my-site.com/#project but there is nothing that is actually triggering the mobile menu to close and reach that url.
I will try to debug the js triggers and see if I can find a workaround. In the meantime if anybody has any suggestion, please let me know and I'll work on a patch.
Thank you
On a search for a solution I also detected the same issue on the Chaplin theme. I hope I can get some support also from their side on this issue.
https://wordpress.org/support/topic/mobile-menu-doesnt-work-for-anchor-links/
Thank you!
For single page navigation case, you may need to create additional scripts to highlight the active #project id section you just reached if you wanted to complete the single page navigation manner.
Similar to scroll spy method, for best UX you may need to add smooth scrollto the particular section#id. This feature would complete all possibility especially if we wanted to showcase how Gutenberg block and section can achieve with this new default theme.
Conceptually how it work;
- In mobile, click the mobile menu toggler,
- Mobile menu revealed
- Click on particular link (let say #portfolio)
- Menu add menu highlight active class to • Portfolio (may highlight parent/ancestor page)
- Mobile menu closed, Mobile menu toggler reversed to default state
- Screen will smooth scroll to selected section