Bootstrap Responsive Navbar for Phones and other devices

Question

This is the website I am working on.

http://ankursinha.net/TestSite/index.php

It's stacking up properly, it's responsive, everything is fine apart from the following.

When I visit this site from my phone or tablet, the navbar shows 3 lines, I click that and all the links show up, and then when I click the "LOGIN", it drops down and shows me Faculty Log In and Student Log In, but when I click one of these, it toggles and closes the dropdown thing.

I know this is happening due to:

data-toggle="collapse" data-target=".nav-collapse"

But how do I fix this and make it like a proper link to navigate through the site on smartphones and tablets? All the browsers had the same problem!

I checked with Responsinator and the same problem occurs there also.

Thank You

Answer 1

Fixed by adding (replace) this piece of code on bootstrap-dropdown.js (at the end of the script) :

$(function () {
  $('html').on('click.dropdown.data-api', clearMenus)
  $('body').on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
           .on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
           .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
 })

Basically stops the touch event on a dropdown from bubbling to the next element, which would be the HTML tag and has the clearMenus function.