Grow your CSS skills. Land your dream job.

Menu toggle for mobile site

  • # January 31, 2013 at 10:17 am

    [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.

    # January 31, 2013 at 11:04 am

    To address the first problem, all you have to do is add `top: 0;` to the `#navicon` selector. That will make it flush with the top of the screen, and keep it from jerking when opened and closed.

    If you want the menu list to stay fixed, add `position: fixed;` and `top: 37px;` to the nav selector.

    Here’s a fork of your pen with just those changes: http://cdpn.io/FkLtE

    Toggling the menu list didn’t look jerky to me, what browser are you using?

    # January 31, 2013 at 11:07 am

    Oh, and also: on the actual site, the content scrolls above the nav bar. If that isn’t intended functionality, you might also want to add `z-index: 1` onto the `#navicon`.

    # January 31, 2013 at 5:17 pm

    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.

    # January 31, 2013 at 9:39 pm

    No problem! I’m glad to help.

    If you put the nav *inside* of the `#navicon` then it will toggle shut on click. You’ll have to restyle the nav a bit, since it’ll inherit styles from the navicon, but that shouldn’t be a problem for you.

    I don’t know what you mean by the menu links not working; I tested it on an iPad, and they worked just fine.

    # February 1, 2013 at 7:21 am

    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.

    # February 1, 2013 at 8:17 am

    Sorry, I don’t have any way to test on a phone.

    This is a pretty big forum though, maybe someone else out there can help?

    # February 1, 2013 at 3:41 pm

    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?

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".