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 >
