CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
DT.DTDG
DT.DTDG

Reputation: 765

Bootstrap 3 navbar header isn't tappable/resonding on Mobile

I've implemented a Bootstrap 3 Nav and I'm encountering this issue for the first time in many years of using Bootstrap.

On desktop browser with device emulation the nav collapses and works as expected, however, when tapping on the header on an actual mobile device it just won't budge. Connecting an iPhone via USB and debugging on Safari shows that on tapping the header no change is made, i.e. the classes collapse in are not added and no HTML is changed.

What I've tried/checked:

View my Fiddle

Upvotes: 1

Views: 49

Answers (2)

Mosby42
Mosby42

Reputation: 130

I had a similar issue within the last month. Try changing the z-index value of the drop down list items. The content may be rendering, but hidden behind another element (header image or something of that nature). You should change that element's z-index value as well.

I would also recommend not setting height values for you navigation. By default, bootstrap wants the drop down menu to 'move' the content below. It cannot do this if the height is fixed.

Upvotes: 0

DT.DTDG
DT.DTDG

Reputation: 765

Seems Bootstrap requires the toggle to utilise <a href="#"> to make it work.

Upvotes: 4

Related Questions