Making a Twit out of Me and You

Posted: 06/03/15

Bootstrap Bug Behaving Badly - Collapsed Menu Items Not Working on Ipad

Responsive websites are more and more popular, and with good reason: according to Trademe, over 50% of their traffic is now from a mobile device. Whether that's genuine buyers, or fantasists lying on the couch dreaming of tat they might never buy is another question, but the growth in the use of mobile devices is undeniable.

So, not surprisingly we're getting more requests to build mobile sites or convert existing ones to responsive format. It makes sense to use a mobile framework, and one that works well is Bootstrap. Concrete5 blends well with Bootstrap, but there are a couple of gotchas.

Firstly, drop down menus will not accept a click or touch on the parent item. This is by design. Our solution to this is to customise the autonav menyu template to include the parent item as the first child.

The second one is that some mobile devices, such as the iPad, struggle with the collapsed menu, and the dropdown links don't work. Surfing around a little, the consensus is that this is an issue with Bootstrap 2.3.2 and a simple CSS override can fix it:

.dropdown-backdrop {
    position: static;
}