Yep, I'm Ian. No problem. As I understand it, it's a general weakness of the framework. You should be able, however, to add a second collapsing nav composed of the dropdowns etc you're already using simply by adding the class nav-collapse al la your top nav, plus the toggle button. You'll need to do a little fiddling with IDs so that the buttons only operate the correct nav, not both at once. I've not needed the drop downs in my own sites so I've not really thought about their limitations on mobile. I know there's been a fair bit of chatter about it on these groups though.
I've just been having a quick google for the issue, and it is indeed one of the known problems. Have you seen this<https://github.com/twitter/bootstrap/issues/4550>? Also, there's supposed to be a work around included in bootstrap version 2.2.2, I notive you've got 2.1. I agree with the single platform thing, which is why I'm such a fan of bootstrap. See builtwithbootstrap.com Best of luck! On Saturday, January 5, 2013 12:30:02 PM UTC, Fred Riley wrote: > > Thanks, Ian (is it Ian?), that's helpful. I'll look into another main > navigation setup, though it would be nice to keep the current setup as IMO > it's well-balanced. Why do you (or anyone else) think that the dropdown > menu items (in the Celtic > <http://www.fredriley.org.uk/callhull/celtic.html>doc, for instance) are > failing on mobiles? Click on a dropdown and try to hit a menu item, and the > hit will just go through it. > > I could implement the site as more mobile-friendly by using jQuery mobile > or another framework, but I'm reluctant to do that as I'm a great believer > in write once many platforms development. > > I've not looked at the Bootstrap > examples<http://twitter.github.com/bootstrap/getting-started.html#examples>on > a smartphone as yet, but will do to see how their navbars behave. Where > is the 'built by bootstrap' showcase you mentioned? > > Cheers > > Fred > > On Friday, January 4, 2013 11:49:49 PM UTC, iange87 wrote: >> >> As far as I can see, Fred, the problem is that you haven't inserted the >> top nav bar correctly. You've not included the html code for the button to >> toggle the collapsed state so when you get to a certain width where the >> items are hidden, you've no way to make them visible. I'd suggest another >> look at the docs, specifically the responsive >> navbar<http://twitter.github.com/bootstrap/components.html#navbar> >> . >> >> As for your other issues, I'm not sure what to suggest but I'm sure >> someone else will be along to help shortly! :-) I would suggest that your >> problems are possibly down to the number of items in your menu. As you >> shrink the screen, the items get more closely packed and harder to select. >> Maybe you could try adding padding through media queries, or maybe explore >> another method of navigation (probably not the answer you were after). >> >> As for examples, have you had a look through those listed on the main >> site, or in the galleries such as built with bootstrap? There's hundreds, >> and you can easily view the source code to work out what's going on. >> >> Best of luck! >> >> On Friday, January 4, 2013 11:03:52 PM UTC, Fred Riley wrote: >>> >>> Thanks to help from this group, and the excellent Bootstrap docs, I've >>> put together a static site <http://www.fredriley.org.uk/callhull/>which >>> looks half-decent on a desktop or laptop. However, it looks dire on >>> mobile devices and features get lost. Even if you just narrow the browser >>> window on a desktop the top navbar items go walkies. Another problem is >>> that drop-down menus on a mobile (for instance in this >>> doc<http://www.fredriley.org.uk/callhull/celtic.html>) >>> will drop down, but clicking on a dropdown item hits the menu beneath it. >>> There are other problems with the site on mobiles, but basically it's not >>> usable, and of course with mobiles being so popular this is a problem. >>> >>> I have included the Bootstrap responsive CSS file in my pages and used a >>> collapsing top navbar, but plainly I need to do more to make the thing >>> usable on mobiles so I'd be grateful for tips and pointers. I have read the >>> fine >>> manual on responsive >>> design<http://twitter.github.com/bootstrap/scaffolding.html#responsive>though >>> that doesn't have much to say. I've used a famous search engine to >>> look for "bootstrap responsive >>> menus<https://www.google.co.uk/search?q=bootstrap+responsive+menus&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a>" >>> >>> but without any conclusive results. There's an intriguing stackoverflow >>> question<http://stackoverflow.com/questions/9150423/how-do-i-get-the-navigation-to-collapse-into-the-small-icon-for-mobile-devices>which >>> might be useful but isn't a whole answer. >>> >>> It's getting late in the night, my eyes are hurting, the neurons are >>> turning off and the beer is calling, so I can't do any more searching now. >>> Is there a guide somewhere to creating responsive menus in Bootstrap so >>> that a page degrades gracefully on mobiles? I'm happy to RTFM if I can find >>> TFM. And/or, are there any good exemplar sites I can emulate? >>> >>> I am familiar with responsive design practice and media queries, though >>> am far from an expert. >>> >>> Cheers >>> >>> Fred >>> >>
