Collapsing menu for mobiles?

It’s a one page site. The menu for wide screens works just fine and makes the page scroll to selected menu item.

But when viewing on mobiles (where the menu folds downwards from top), the menu stays open when user clicks a menu item since no new page opens.

Have tried umpteen free menus, but none works as I wish. The only one that actually did relied on bootstrap css which made it more or less impossible to redesign to fit into the site.

Does anyone know a mobile menu that I can use? It doesn’t have to be responsive as I can use different menus for different screen widths. But it has to collapse when a link has been clicked even as it’s just a single page.

Oh, I’m not a super geek and not using bower, git or similar.

It might be better for us to see the code for your desktop menu and suggest how to adjust it for mobile.

Thanks for response!
The desktop menu is just a regular ul with li:s floating left, i.e. nothing fancy at all. And I don’t need to use that html for mobiles. Can hide it below e.g. 800px and show a mobile designated menu below that.
Commonly, a mobile menu disappears when a new page opens. But as it’s a one page site, the menu stays open and require the user to close it. That’s what I’m trying to find a way to avoid. I simply want a menu for mobiles that collapses automatically when a user has opened it and clicked any of the menu links.
(Bear with me. English isn’t my native tongue)

I have a hamburger toggle menu in an old codepen and just converted it to close when links are clicked.

It’s very very basic but easily customised.It may be of some use.

Requires JS of course for the toggle actions.

Paul!
Have so far merely copied your code and tested locally in one single browser. But it seems to be exactly what I’m looking for. :slight_smile: Will come back later today after a better test.
Thanks a bunch!!!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.