Menu toggle for mobile site

[margaux]

[This example](http://codepen.io/margaux/pen/Jknzy “”) is the basic gist of what I’m trying to achieve. However the ‘menu’ link doesn’t stay put as it is opened and closed.

Please view the [mobile site](http://www.articulate.uk.com/mobile.php “”) where there are all kinds of problems:

The Menu link doesn’t sit flush to the top of the screen until you click it.

The menu list doesn’t stay fixed if you scroll down the page. Consequently, you could scroll down and the menu stays open. More importantly if you then click the Menu link, the menu closes and its not a good user experience.

The toggling of the menu list is a little jerky.

I’m trying to ensure that the menu link and list are fixed as you scroll up and down the page. I’ve tried a number of different combos of positioning on the nav element and the nav list but am in need of more expert help from you guys. Thanks.

[margaux]

Those changes work nicely thank you.

One problem – when testing on an iPhone 4 there are some usability issues: when the menu is toggled open and the user clicks on a menu list, the menu then doesn’t toggle closed nor do any of the other menu links work. If you scroll the page slightly, the links all then work okay. Have not tested on any other devices. This page will only be presented if being browsed from a mobile phone.

Any ideas on how to keep the menu links working? Thanks again.

[margaux]

I made the change you suggested and I like the way when you click a menu item and the page scrolls down, the menu closes automatically. Did not expect that but it is a nice feature.

However, I still get a usability problem on phones only, not iPads or computers. If you get a chance could you have a look at it on a phone and suggest a fix to this problem – when you click the navicon, the menu slides open nicely, then if you click a menu item, you can’t immediately click the navicon to open the menu again, you have to move the page a bit.

Also the navicon bar disappears on the samsung phone after you click a menu item.

Would be grateful for some suggestions on how to fix these usability issues. Thanks for looking.

[margaux]

Well, thanks alot for your help. Hopefully someone will have a look or maybe I should start a new thread as this seems to be an issue on phones only?

[Author]

Posts