Hi Fred That is indeed a pain! Hmm, sorry I can't be of more help! Did you look at the github link for the workaround?
BTW, the nav didn't collapse for me, which one are you targeting? Ian On Monday, January 7, 2013 3:58:01 PM UTC, Fred Riley wrote: > > 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 >>>>> >>>>
