One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobile resolution. The navigation most likely ends up running into multiple lines or the buttons stacking on top each other. So I’m going to review some of the design solution and provide a quick tutorial on how to create a mobile navigation with jQuery.

View Demo Mobile Nav

Problem

The screenshots below show the navigation layout issues on mobile. If the navigation has 3 or 4 buttons like Web Designer Wall, then the navigation won’t wrap into two lines. But if the navigation contains 6 or more buttons, they will stack on top each other.

bitfoundry

Solutions

1) Dropdown

One of the commonly used solution is to convert the navigation into a select dropdown. I’m not a big fan of this approach because the <select> element is not stylable with CSS. Javascript plugins like Chosen enables you to modify the dropdown menu, otherwise you end up with the default system dropdown styles. It also causes inconsistent user experience where the desktop version displays link tags and the mobile version displays as a dropdown menu. If you like this solution, here is a tutorial by CSS-Tricks on how to convert a menu to a dropdown.

smashing magazine
iA

2) Display as Block

Another quick fix is set each menu item as block elements so they display vertically. But this approach takes a lot of header space. If the navigation has many buttons, this is a bad idea because the readers have to scroll down through the long list of navigation before reaching the content.

forefathers
love and luxe
london and partners

3) Menu Icon

The last solution that I’m going to review is to use a menu icon/button to toggle the navigation. I like this method out of the three because it saves space (very important on mobile) and it gives you full control of styling with CSS. The menu icon can be styled to match with the overall design.

sony
bootstrap
image
prl

Mobile Navigation with jQuery (view demo)

This tutorial shows you how to create a mobile navigation with jQuery as seen on the sites listed above. jQuery will be used to prepend the menu icon and toggle the navigation. This trick doesn’t require any extra/un-semantic HTML tags.

HTML

Below is the sample navigation HTML used in this tutorial:


<nav id="nav-wrap">

	<ul id="nav">
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
	</ul>

</nav>

jQuery Code

Include a copy of jQuery and the function below in between the <head> tag. The function will prepend the <div id="menu-icon"> in the <nav id="#nav-wrap"> tag. When the #menu-icon element is clicked, it will slide down the navigation.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){

	/* prepend menu icon */
	$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
	
	/* toggle nav */
	$("#menu-icon").on("click", function(){
		$("#nav").slideToggle();
		$(this).toggleClass("active");
	});

});
</script>

It will render the HTML code like this (you need to Inspect Element or view generated source code to see this):


<nav id="nav-wrap">

	<div id="menu-icon">Menu</div>

	<ul id="nav">
		<li><a href="#">Button</a></li>
		<li><a href="#">Button</a></li>
	</ul>

</nav>

CSS

I’m not going to explain every detail of the CSS code because it is pretty straight forward. Instead, I will talk about the key parts.

The #menu-icon is set to display:none initially. I used media query to change the #menu-icon to display:block if the viewport width is smaller than 600px.

css explain

In the media query, I set the navigation to display:none so it is hidden initially on mobile. When the #menu-icon is clicked, it will toggle the navigation as specified in the jQuery function at the above step.

Final Demo

To see the final mobile navigation, view the demo and narrow your browser window or check with your mobile phone.

final demo

Update:

Also read this CSS Based Responsive Navigation Menu tutorial.

118 Comments

Web Design Wolverhampton
Apr 4, 2012 at 3:06 am

Probably the simplest way of providing an alternative nav is to display/hide different DIVs, each containing a different nav style, depending on the screen size (using viewport). No jQuery needed (although we love jQuery). We’ve used it here http://www.scubashack.co.uk

ehhwhat.co.uk
Apr 4, 2012 at 3:54 am

Interesting idea, just looked at your example too and noticed that the menu doesnt dissappear if you click it again, i think this would be better as a toggle in case a user accidently clicks on the menu button.

Web Design Wolverhampton
Apr 4, 2012 at 4:54 am

Thanks for the feedback. The mobile menu is just at the bottom of the page, so if a visitor clicks “Menu”, they’re still on the same page. We could add a toggle that simply jumps back to the top of the page.

ehhwhat.co.uk
Apr 4, 2012 at 3:52 am

Really useful information, will look to implement the drop down menu at some point in the near future on my website, currently using the block example and even with only 4 or 5 menu items it still takes up too much space

Alexander Taubenkorb
Apr 4, 2012 at 4:06 am

Nice approach. Unfortunately it does not work without javascript….

ehhwhat.co.uk
Apr 4, 2012 at 4:16 am

Be interesting to see some stats for javascript enabled on mobile devices, id imagine that all smart phones have it but i could be wrong

Anthony
Apr 4, 2012 at 9:57 am

I believe all your major phone browsers support javascript (iOS, Android & Windows Phone). Most web apps are built using javascript so they have a dynamic feel. You will get better support from javascript then you will CSS3 or webkit(iOS & Android only). Looking at you Android & Windows Phone.

john
Apr 10, 2012 at 6:23 pm

Lol that doesn’t matter anymore kid, everything has JavaScript enabled… if you disable it, you’re a wanker.

Dean
Apr 4, 2012 at 7:08 am

Bug….
Resize browser to switch to mobile menu, open and close mobile menu, then resize back. Horizontal menu is gone….

fatfingur
Apr 6, 2012 at 1:56 am

you are absolutely right!!! Nick La should probably fix the bug first. It’s obvious he didn’t test the demo well enough before putting it up.

I’d stick to the dropdown menu solution though. why rely on javascript when you can use dropdown. it’s easier for users and lighter on the browser.

nice try though.

peter
Apr 11, 2012 at 9:27 am

cmon, who does that?! nobody except webdesigners… and they can find bugs _anywhere_ if they just want to.

zep
Apr 4, 2012 at 9:03 am

The Sony menu is very sexy, I like it !!!
I found this one also interessant http://www.moonservices.ch/

Brad Frost
Apr 4, 2012 at 9:59 am

Great article! I also recently looked into the pros and cons of various navigation patterns for responsive design here: http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Great stuff!

Josh
Apr 4, 2012 at 10:11 am

I’m noticing an issue with the navigation not displaying once you switch back to wider width. Steps to reproduce:

– Make screen size small and the navigation switches to the menu drop down
– Click to see the menu drop down and then click again to hide the menu
– Make screen size large and notice the navigation no longer displays

Nick La
Apr 4, 2012 at 12:16 pm

This is intended for mobile users, not for developers like yourself. Normal readers don’t narrow and then expand their browser window (only developers do that). If you want, you can add another media query to force the #nav to display:block !important; on desktop resolution.

sushidev
Apr 6, 2012 at 2:04 am

way to go man. instead of admitting your mistake you tell us that the demo is only intended for devs and “normal readers” don’t resize browsers. great way to treat your readers!

Stuart Robson
Apr 6, 2012 at 9:47 am

“Normal readers don’t narrow and then expand their browser window ” That’s quite a sweeping statement. Have you got any stats to back that up?

john
Apr 10, 2012 at 6:25 pm

common sense? That backs it up pretty well…

Zoe Gillenwater
Apr 6, 2012 at 11:36 am

Hi Nick. I agree that normal users rarely resize their browsers explicitly. However, they do often switch from portrait to landscape and vice versa, so it’s essential that you add functionality that allows the user to change back and forth repeatedly.

Nick La
Apr 6, 2012 at 2:48 pm

For those concern about the navigation being hidden when switching from mobile version, check the demo again. I applied the fix that I mentioned above in the comment. Now the #nav is always visible on desktop version.

Jay Kapadia
Apr 6, 2012 at 2:54 pm

As Nick said, by simply adding @media screen and (min-width: 600px){ #nav{ display:block !important; } } the issue is solved, its a slick and well produced result that I’m implementing right now. Thanks for sharing Nick

Rien
Apr 24, 2012 at 9:15 am

on my galaxy s i switch frequently from portrait to landscape and back and got the same bug ;-) but even though i love this tutorial. Thanx..

Sean
Apr 4, 2012 at 10:29 am

Out of curiosity, why append the menu-icon div using javascript? Why not have it in the source in the first place, and do a display:none on non-mobile widths?

Nick La
Apr 4, 2012 at 12:12 pm

Just to be more semantic without adding unnecessary tags.

Sean
Apr 4, 2012 at 4:51 pm

But that tag is necessary if you come at the problem from a mobile-first perspective. Plus, one could argue that adding “Menu” in some sort of appropriate heading tag (as opposed to a div) would make the whole thing more semantic.

By the way, I am not trying to be an asshole about it, so please do not take offense. This article comes at a very good time for me, and has some good info in it, so thank you.

Nick La
Apr 5, 2012 at 9:42 am

Good point here. The “menu” text could be a heading tag and semantic. It works the same without prepending content with jQuery.

Hajo
Jul 5, 2012 at 3:31 pm

Struggeling on my first mobile first responsive website I have your toggle menu running. The only problem I have is still the bug. It isn’t switching back to normal menu.

I use mobile first so I have the defauld layout for mobile and use the media query to expand for bigger viewports.

How kan I get rid of the bug?

I don’t understand fully the comment fron Sean.

If no solution I’ll have to live with it, this toggle is the only menu I got worken,

So Thanks!!!!

Neil
Apr 4, 2012 at 9:48 pm

Its always nice when someone bases a post on one you wrote over 2 months ago.

You made a better job of it, I’ll have to say. Well done.

http://blog.bleepsystems.com/2012/solving-a-responsive-design-navigation-problem/

David
Apr 8, 2012 at 10:12 pm

Are you kidding? Your blog doesn’t come up within a relevant number of results for either “responsive design navigation” or “mobile navigation”. If Nick has ever heard of your blog I’d eat my hat. And even if he somehow had heard of it, to claim he based his post on yours is plain silly (and your tone implies he “ripped it off”). Nick lectures about these kinds of things all over the world. Responsive design mobile navigation best practices have been discussed constantly in the web design community (forums, twitter, conferences, videos, articles. podcasts, etc) over the last year or more. In fact most of these exact examples are covered in “Mobile First” by Luke Wroblewski, published Nov 2011 (ah hem, several months before your blog post). Anyone who frequents mediaqueri.es has been exposed to all of these navigation ideas already. Nick wrote a nice article summarizing the ideas and giving his thoughts on which he prefers. Nothing wrong with that… in fact I hope many more posts by various notable web designers add their own perspective. Bah you just wanted to stir up some controversy and drive clicks to your blog, which unfortunately you have succeeded at. Yay for nofollow at least.

robe d'avocat
Apr 5, 2012 at 3:16 am

Good ideas and good solutions for a real problem on mobiles. I guess the “lov&lux” version is the better to easily navigate and to stay a beautiful app.
thx for tips.

web application designer
Apr 5, 2012 at 7:14 am

Thank you so much for this list, it really helps me out!

SEO-Backlink
Apr 5, 2012 at 10:27 am

Great ideas!
But one problem is still alive…
how to navigate on sub navigation if the second level is default hidden. because hover don’t exist…
for examplel ul > li >ul >li

Konstantin
Apr 5, 2012 at 10:35 am

Hey. Why not make the addition of icons in CSS? I think JavaScript is useless. Correct me if I’m wrong. Thanks!

Adam
Apr 5, 2012 at 12:38 pm

I like your preferred method of displaying the navigation as a drop-down. Great tutorial! Thanks for sharing!

David Hucklesby
Apr 5, 2012 at 2:25 pm

Demo not working in Opera 11.62 on Mac OS X 10.7.3. The HEADER “content” property wipes out the entire menu! :(

Glow
Apr 6, 2012 at 4:57 am

@SEO-Backlink, all the sub navigations will be expanded when you click on the menu link, so this is not a problem.
In some cases you can decide to keep the toggle effect on hover to show the subnavigation, it will be replaced by an “onclick event” on most touchable screens

William@ Budget Web Design
Apr 6, 2012 at 7:34 am

Seems bit complex than HTML but effective :)

Architecture Blog
Apr 7, 2012 at 6:24 am

Love this post to navigation given that mobile browsing is an unstoppable upward trend. I would really appreciate if Web Designer Wall gave some more insights into optimizing websites for mobile devices. Probably and interesting topic is optimizing CTRs (navigation ex-menus) within site pages, as links are not displayed equally in desktops/mobile. Thanks!

ptamaro
Apr 7, 2012 at 2:41 pm

Great post. I agree with you and the other folks who prefer the last solution. It seems the most practical, and it has an elegance in it’s simplicity and control over to final look…

Mohit Bumb
Apr 8, 2012 at 10:15 am

nice tutorial

menna
Apr 9, 2012 at 9:23 am

its very good tools for blackberry web works .. but i’m looking for tools like menus may help me to desgin simple menu for blackberry java application.
are these designs good for what i need?

rory
Apr 9, 2012 at 4:05 pm

Interesting concept…
Why load a heavy library like jquery though? Why not just use straight JS?

food for thought…

Vinny
Apr 9, 2012 at 4:57 pm

Very useful information! Great article.

Roman
Apr 10, 2012 at 2:30 am

Does it work when the Java Script is disabled??

Juris Malinens
Apr 11, 2012 at 8:08 am

This doesn’t work on my old Windows Mobile phone with Opera Mini- I get empty space instead of navigation button…

Roman
Apr 13, 2012 at 4:33 am

Does Ur browser support Java Script?? If not – that’s probably the reason why it doesn’t work properly..

coder-design
Apr 11, 2012 at 8:40 am

Great tutorial. Thanks for sharing.

Arcelik
Apr 12, 2012 at 10:37 am

Useful tutorial.Thanks.

Joomla Templates
Apr 12, 2012 at 12:08 pm

nice info thanks for sharing.

Hoacatorama
Apr 12, 2012 at 9:43 pm

I really really like this site very much

Hoacatorama
Apr 12, 2012 at 11:23 pm

Trời ơi, đây là người Việt Nam sao, thật là ngưỡng mộ

Website Development
Apr 13, 2012 at 6:10 am

Thanks for sharing such useful information and I believe blog commenting can do wonders for anyone working on it. I completely agree with your view that blog commenting don’t have to be used for SEO only.

custom icon design
Apr 15, 2012 at 3:59 am

I will use this demo for my next website updated I am sure.

Think360studio
Apr 16, 2012 at 5:43 am

Great tutorial. As per todays demand this article is really good. Every client wants a mobile navigation design because now a days mobile is the vastly used device so its very important for every designer that each site designed by him should also open in mobiles.

Paisagista em Sorocaba
Apr 16, 2012 at 2:04 pm

Great tips! I`ll use it right now! Tks!

Jill
Apr 18, 2012 at 8:43 am

Exactly what I’ve been looking for. Great tutorial thanks.

Free Mobile Site Builder
Apr 19, 2012 at 2:31 am

Just to complement this a little, there are many free mobile site builder like morces.com (I’m using it currently) provides the same quality and a comprehensive set of features that meet up to the industrial expectation.

No harm visiting morces.com! =)

Ace
Apr 19, 2012 at 4:12 pm

Is source code available ?

Jered
Apr 22, 2012 at 3:38 am

@Ace: Have you read the article? There is are several references to the demo. When viewing the demo you can watch the source and learn from it :)

Sherwin
Apr 22, 2012 at 10:04 pm

Thanks for this, i’m looking for this tutorial for a long time.

Michael Oeser
Apr 25, 2012 at 9:24 am

AWESOME. Took me 5 Minutes to implement the jQuery solution into my WordPress theme ( jQuery is loaded anyway for many other stuff). And makes my responsive site much , much better. Thanks a ton!

iWeb
Apr 29, 2012 at 6:47 am

very nice work, but did´nt work with opera

Drew Johnston
May 10, 2012 at 2:03 pm

I noticed that too, the navigation wouldn’t even show up in the demo, but hey… you would only really notice it on mobile devices unless you resized your window to test it out.

magazin
Apr 30, 2012 at 12:52 pm

This does look like a great theme.

Tom
May 1, 2012 at 11:16 am

Great tutorial. Always look for a simple way to do this across different websites.

Life insurance for diabetics
May 2, 2012 at 5:28 am

looks amazing!! great job…

Web dizajn Sarajevo
May 4, 2012 at 4:35 am

Wow ! Nice article. Thanks …

Aaron Lee
May 7, 2012 at 6:36 pm

This is a brilliant post, I’ve been plagued with navigation problems on mobile devices for a while and was using the display block method for a while but now I’ve definitely been converted to this awesome jQuery alternative. Thanks again!

طراحی سایت
May 8, 2012 at 12:42 am

Merci. good paper

Aquaster webdesign
May 8, 2012 at 8:53 am

Confronted with mobile webdesign the problem is space, diversity of phones and the thinkness of the finger ;).

Stuart Robson
May 19, 2012 at 10:04 am

Unfortunately this demo breaks when the ‘mobile device’ doesn’t have JavaScript enabled. We should be doing this more progressively. I’ve created a tutorial on this too –

http://alwaystwisted.com/post.php?s=2012-05-14-create-a-responsive-mobile-first-menu

Jim
May 19, 2012 at 11:10 am

Just a heads up for anyone having issues. My CMS (Drupal) was using an older version of jQuery (1.5.2) which was reporting errors. I think it was the click code in this demo. I fixed my issue by updating to the following code:

$("#menu-icon").click(function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});

Thiet ke logo
May 20, 2012 at 12:08 am

thanks for sharing, this article details, very useful!

Debbs Hosting
May 27, 2012 at 5:26 am

I like the idea of the Dropdown and Menu Icon, too. I’ve also had difficulties with jQuery before and I thought maybe it wasn’t compatible with the theme I’m using. Thanks for sharing this tutorial. Now I know how to do it.

mojtaba
May 28, 2012 at 4:20 am

great post.
is it possible to use twice in page?

Paul
May 28, 2012 at 3:49 pm

Anyone has a problem in I.E.?

sunil sharma
May 29, 2012 at 7:32 am

Many many thanks for great post.

Dheeraj
Jun 4, 2012 at 2:17 pm

Nice job. Thanks for the tutorial. I will definitely try it out.

PC Muskel
Jun 10, 2012 at 5:57 pm

Thanks, I just updated my website to support mobile devices. :-)

Adrian
Jun 20, 2012 at 3:41 am

I think my preferred method would be the menu icon, expanding to show a menu when clicked. So much to consider when designing specifically for mobile, exciting times though!

Paul
Jun 20, 2012 at 7:53 am

Loved the way you explained it. Thanks for sharing the article.

Paul Spiric
From Webstarttoday

design
Jun 21, 2012 at 9:39 am

Thank you so much for this list, it really helps me out!

Gwen
Jun 21, 2012 at 10:07 am

Remove in style for HTML5 element header the CSS code in line 17 reading content: ” “ and the mobule menue works with Opera, too.

Woody
Jun 25, 2012 at 9:54 am

Good post, am going to have to write a big projects mobile CSS next week, this is going on my ‘watch for’ hit list.

Cheers
Woody
StormGate

Stephen Scaff
Jun 26, 2012 at 12:31 pm

First off, great tutorial! Had me up and running in a few mins.

Have a question regarding the last option with jquery:

If I want to use this type of menu on a single page site, using page anchors and scrollTo, how can I get the menu to close after selecting a page anchor-based link?

As is, the drop down menu remains open, requiring the user to select the menu link again to close. I’d like for it to automatically close after selecting the link.

Thanks again.

Sky
Jul 26, 2012 at 8:34 am

I had the same problem. Not sure if this is a great fix, but here’s what I did. I added a class “navlink” to all the links in the navigation. Then I put this script in there:
$(“.navlink”).on(“click”, function(){
$(“#nav”).slideUp();
});

website designer austin
Jun 27, 2012 at 2:34 am

Thanks for this post. I am very helpful by this post.

Termopares
Jul 2, 2012 at 3:06 pm

Great tutorial. I always come here for new stuffs! Tks!

Application Development for Android
Jul 7, 2012 at 7:04 am

Amazing tutorial for mobile navigation. When I would like to get tutorials and information about application, design, development and new theme, I have written on browser only webdesignerwall.com. Please keep up the gratifying work.

igneta
Jul 20, 2012 at 4:23 am

its veryy beautiful

Nancy
Jul 23, 2012 at 10:42 pm

Tried this out on personal website, works well. I will be using method on several non-profit sites. Thank you ! !

συστηματα φωτοβολταικων
Jul 26, 2012 at 6:17 pm

Nice info thanks for sharing!

Ibiza yates
Jul 30, 2012 at 3:17 am

Have a question regarding the last option with jquery:

If I want to use this type of menu on a single page site, using page anchors and scrollTo, how can I get the menu to close after selecting a page anchor-based link?

As is, the drop down menu remains open, requiring the user to select the menu link again to close. I’d like for it to automatically close after selecting the link.
I have written on browser only webdesignerwall.com. Please keep up the gratifying work.

Thanks again.

Alquiler yates Ibiza
Jul 30, 2012 at 3:17 am

When I would like to get tutorials and information about application, design, development and new theme, I have written on browser only webdesignerwall.com. Please keep up the gratifying work.

Yates en Ibiza
Jul 30, 2012 at 3:21 am

Good post, am going to have to write a big projects mobile CSS next week, this is going on my ‘watch for’ hit list.

Web Design Newcastle
Jul 30, 2012 at 9:51 am

Simply put, this is a brilliant tutorial.

Yates de lujo en Ibiza
Jul 31, 2012 at 11:19 am

Son un grupo empresas de gestión global de barcos y yates de lujo con base en Ibiza y nacen con el objetivo de optimizar recursos para cubrir las necesidades de un mercado náutico en expansión cada vez más experimentado y globalizado.

Nuestra principal actividad se centra en la náutica de recreo, seleccionando para nuestros clientes los mejores barcos de alquiler disponibles en Ibiza e Islas Baleares. Únicamente trabajamos con los principales armadores de cada zona, a los que exigimos un mantenimiento exhaustivo de las embarcaciones y, en general, un servicio de máxima calidad, con la garantía que aporta un gran grupo de chárter con presencia internacional.

Entre nuestros clientes contamos con numerosas empresas de reconocido prestigio y somos proveedores de las más importantes agencias de viaje.

Mark
Aug 4, 2012 at 2:15 am

Thanks for the !important fix. I was racking my brain there for a while looking for a solution. Great article btw!

Alquiler yates Ibiza
Aug 4, 2012 at 7:00 am

Your blog doesn’t come up within a relevant number of results for either “responsive design navigation” or “mobile navigation”. If Nick has ever heard of your blog I’d eat my hat. And even if he somehow had heard of it, to claim he based his post on yours is plain silly (and your tone implies he “ripped it off”). Nick lectures about these kinds of things all over the world. Responsive design mobile navigation best practices have been discussed constantly in the web design community (forums, twitter, conferences, videos, articles. podcasts, etc) over the last year or more. In fact most of these exact examples are covered in “Mobile First” by Luke Wroblewski, published Nov 2011 (ah hem, several months before your blog post). Anyone who frequents mediaqueri.es has been exposed to all of these navigation ideas already. Nick wrote a nice article summarizing the ideas and giving his thoughts on which he prefers.

Dan
Aug 5, 2012 at 1:41 pm

I read through the discussions earlier about web designers being the only ones to resize their screens and I’m not going to get into that debate, but I did resize my screen and discovered a bit of a bug that I can’t quite remedy and wanted to put this out there.

I’m new to media queries so maybe this is an issue about those in general but at the precise pixel size when the desktop nav converts to the mobile nav, the dropdown ul displays. I’m talking like at screen width 601 its desktop, at 599 its mobile with dropdown hidden, but at 600 exactly its mobile with the dropdown visible. Look at the demo and slowly resize your screen around the point where the conversion happens and you should see what I mean. I tried it in the latest versions of Chrome, FF & IE9 and all did the same thing.

I realize the chances of a user’s screen size being at that 1px wide margin of error is slim at best but are there any suggestions to ensure the dropdown is hidden at that point?

Thanks!

rickymartin
Aug 11, 2012 at 6:46 am

Very nice collection.

Diana
Aug 21, 2012 at 9:23 pm

Thanks Nick, though mine is somewhat different I loved this effect!

Michael Meininger
Aug 28, 2012 at 12:31 pm

Fantastic Write up and eager for more mobile site solutions

seo
Aug 30, 2012 at 2:58 am

Thank you so much for this list, it really helps me out!

amy sidra
Sep 5, 2012 at 3:14 am

thank’s bro. very usefull. i will apply it to my website

Joe Ray
Sep 9, 2012 at 1:25 pm

Unfortunately this script seems to break in mobile when the menu is set to a fixed position. I’m doing a one page site and want the menu to be permanently attached to the top of the screen, and for the links to link to content further down the same page, but when I do that the menu becomes unresponsive on the phone after the first link is clicked, unless i scroll the page slightly.

I don’t encounter this problem when viewing on the desktop. Is anyone else having this problem, and does anyone have a workaround? Much thanks if you do.

Joe Ray
Sep 17, 2012 at 2:20 pm

Actually, in answer to my own question, turns out this is a known bug in iOS 5. There’s a whole thread on it at stackoverflow, with a bunch of possible solutions, none of which have worked for me so far, but some of them may be of use to others having this problem.

http://stackoverflow.com/questions/8752220/mobile-safari-bug-on-fixed-positioned-button-after-scrolltop-programmatically-ch

Georgios
Sep 14, 2012 at 6:08 am

Very useful and informative post. Thank you.

selahattin
Sep 15, 2012 at 7:01 am

mobile design is really important.

Ant
Oct 2, 2012 at 10:38 am

Thanks for the tutorial, very simply and a elegant approach. Would this work on a WordPress menu?

Cheers,

Ant

Marcus
Oct 4, 2012 at 2:23 am

Thanks! Chosen is a good plugin which I will use on some apps.
In past I have the only styled by setting the text-size with padding, margin etc..

Joseph
Oct 11, 2012 at 7:05 am

This was not nice at all….i tried it using opera mobile browser and the nav did not even show up. I thought i did some coding error but i tried your online demo link and the same thing. Did you consider mobile browsers without JavaScript support..Such as opera mini and bolt…Nice post too.. Please find a fix for non-JavaScript browsers

vishnu
Oct 14, 2012 at 3:30 pm

Another superb article. Liked it :-)

Holistic medicine
Nov 14, 2012 at 12:02 pm

I was racking my brain there for a while looking for a solution. Great article btw!

Iacho
Jan 30, 2013 at 8:41 pm

Thank you so much. I’ve been looking for this for days and here it is. All I needed was a simple menu and everything I found was super-complex ones.
Really, thank you very much.

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.