Bootstrap V2 Dropdown Navigation Not Working on Mobile Browsers

Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

In your minified bootstrap.min.js file, find the substring

"ontouchstart"

and replace it with

"disable-ontouchstart"

Check out this similiar SO question:
Bootstrap Collapsed Menu Links Not Working on Mobile Devices

Twitter Bootstrap (v2.2.1) dropdown links not working on mobile

I've tracked it down to a bug in Bootstrap 2.2.1 the changelog for 2.2.2 states:

Dropdowns: Temporary fix added for dropdowns on mobile to prevent them from closing early.

If I swapped the bootstrap.js on my site from v2.2.1 to v2.2.2 then the buttons start working.

So now, if I view this code on jsFiddle using the latest v2.2.2 Bootstrap then it works.

<html>
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="btn-group">
    <a class="btn btn-primary" href="link1.php">
        Dropdown button
    </a>
    <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li class="nav-header">Recent</li>
        <li><a href="http://google.com">Google</a></li>
        <li><a href="http://bing.com">Bing</a></li>
    </ul>
</div>
</div>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script type="text/javascript">
        $(function () {
            $('.dropdown-toggle').dropdown();
        });
</script>   
</body>
</html>

Bootstrap Navbar not working when in mobile mode

You also need to link the JavaScript Bundle for Bootstrap. The mobile menu only works with JS.

The JS Bundle code is:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

All you gotta do is to add the JS dependency to make it work:

<!DOCTYPE html>
<html>

<head>
  <title>Hello World!</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

  <style type="text/css">
    #jumbotron {
      background-image: url(bg1.jpg);
      height: 25rem;
    }
    
    .center {
      text-align: center;
    }
    
    #cardDeck {
      margin-left: 1rem;
    }
    
    #logo-space {
      background-color: blue;
      width: auto;
      height: auto;
    }
    
    #logo {
      width: 300px;
      height: 120px;
      padding: 15px;
      margin-left: 5rem;
    }
    
    #FMS-BTN {
      width: 12rem;
      position: relative;
      top: 3rem;
      left: 5rem;
    }
  </style>
</head>

<body>
  <div id="logo-space" class="row">
    <div class="col">
      <img id="logo" src="img/logo.png" alt="Sample Image">
    </div>
    <div class="col">
    </div>
    <div class="col">
      <a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
        <img src="" alt="Sample Image">Head to FMS</a>
    </div>
  </div>

  <div id="nav-area">
    <div class="row">
      <div class="col">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container-fluid">

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>

            <div class="collapse navbar-collapse" id="navbarText">

              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">HOME</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">ABOUT US</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">DIVISIONS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">APPEALS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">FEED</a>
                </li>
              </ul>

              <span class="navbar-text">
                          <a href="url">APPLY NOW</a>
                        </span>
            </div>
          </div>
        </nav>

      </div>
    </div>
  </div>
</body>

</html>

Drop-Down Menu not working on mobile devices

A temporary fix is to add

.dropdown-backdrop{
    position: static;
}

to the css file.

Bootstrap Dropdown menu is not working

Maybe try with

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

and see if it will work.

Bootstrap v3.3.6 Dropdown not working with mobile menu

I think I have finally found a solution here: How to make twitter bootstrap menu dropdown on hover rather than click

With the mouse It's (relatively) easy to get the links, I havn't tried yet with a real mobile phone. But it's the best solution I have found.

1) Add theses line in the css file.

ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;    
}
@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

2) remove this class in the html file:

<b class="caret"></b>    <-- remove this line

Bootstrap V2 Dropdown Navigation Not Working on Mobile Browsers