Thanks again, Ian. I've fitted a collapsing button on a test page<http://www.fredriley.org.uk/callhull/test.html>and it works fine when the width goes below 940px. The built with bootstrap site is also a very useful link, and for sure I'll be pilfering some code from that! One of the curses of such a successful and popular framework is that so many sites end up looking similar, so the wide variation in the showcase illustrates that, with a bit of effort, you can go beyond the 'default' Bootstrap look.
I've updated to the latest Bootstrap (2.2.2) but the dropdown-button problem still remains on a smartphone. Clicking on any item in the dropdown either re-collapses the menu if there's no link behind the dropdown, or hits a link behind it. This is a nuisance in that there's no way that the user can get to the main page (eg Celtic) directly, so I might have to implement a split button dropdown<http://twitter.github.com/bootstrap/components.html#buttonDropdowns> . Cheers Fred On Saturday, January 5, 2013 1:48:28 PM UTC, iange87 wrote: > > 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 >>>> >>>
