After years of using Bootstrap, I've come across a new issue with my implementation of a Bootstrap 3 Nav.
While testing on a desktop browser with device emulation, the nav collapses and functions properly. However, when tapping on the header on an actual mobile device, it does not respond at all. Using Safari for debugging on an iPhone connected via USB reveals that tapping the header does not trigger any changes - the classes collapse in
are not added and the HTML remains unchanged.
Here's what I've tried and checked:
- Added
maximum-scale=1.0
to the meta viewport - Confirmed correctness of
data-toggle
anddata-target
, which work fine on desktop - Replaced bootstrap.min.js from the Bootstrap CDN
- Stripped back CSS styles