I believe that most of you had face this kind of problem. Bootstrap 3 dropdown menu
is clickable on desktop browser, but when comes to mobile, then it has no effect at all.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <div id ="main-wrapper" > <div id ="bg-holder" > <div class ="navbar" role ="navigation" > <div class ="container" > <div class ="navbar-header" > <button id ="btn-navbar-toggle" type ="button" class ="navbar-toggle bg bg-green" data-toggle ="collapse" data-target =".navbar-collapse" > Menu </button > <a class ="navbar-brand" href ="/" > Logo</a > </div > <div class ="collapse navbar-collapse bs-navbar-collapse" > <ul class ="nav navbar-nav" > <li > <a class ="bg bg-green" href ="/" > Home</a > </li > <li > <a class ="bg bg-green" href ="/page1.php" > Page 1</a > </li > <li > <a class ="bg bg-green" href ="/page2.php" > Page 2</a > </li > <li > <a class ="bg bg-green" href ="/page3.php" > Page 3</a > </li > <li > <a class ="bg bg-green" href ="/page4.php" > Page 4</a > </li > </ul > </div > </div > </div > <div id ="pg-1" class ="container common-wrapper" > <div class ="row" > <div class ="col-xs-12 pole-content-holder" > <div class ="pole left" > </div > <div class ="pole right" > </div > <div id ="pole-heading" class ="center-div" > <h1 > Page 1 <img src ="/assets/img/icon-pg1.png" /> <div class ="btn-group" > <button type ="button" class ="btn btn-primary dropdown-toggle" data-toggle ="dropdown" > Item 1 <span class ="caret" > </span > </button > <ul class ="dropdown-menu" role ="menu" > <li > <a href ="/index.html" > Item 1</a > </li > <li > <a href ="/index.html?item=2" > Item 2</a > </li > <li > <a href ="/index.html?item=3" > Item 3</a > </li > <li > <a href ="/index.html?item=4" > Item 4</a > </li > </ul > </div > </h1 > </div > ...
I’ve googled for hours, even try to modify the bootstrap.min.js file, it still doesn’t works.
Then I try to bind a “click” event on that button
i.e.
1 2 3 $('.dropdown-toggle' ).click (function ( ) { alert ('dropdown clicked' ); });
The alert works on desktop, but has no effect on mobile browser.
Then I try to move the whole chunk of html to the top
i.e.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <div id ="main-wrapper" > <div class ="btn-group" > <button type ="button" class ="btn btn-primary dropdown-toggle" data-toggle ="dropdown" > Item 1 <span class ="caret" > </span > </button > <ul class ="dropdown-menu" role ="menu" > <li > <a href ="/index.html" > Item 1</a > </li > <li > <a href ="/index.html?item=2" > Item 2</a > </li > <li > <a href ="/index.html?item=3" > Item 3</a > </li > <li > <a href ="/index.html?item=4" > Item 4</a > </li > </ul > </div > <div id ="bg-holder" > <div class ="navbar" role ="navigation" > <div class ="container" > <div class ="navbar-header" > <button id ="btn-navbar-toggle" type ="button" class ="navbar-toggle bg bg-green" data-toggle ="collapse" data-target =".navbar-collapse" > Menu </button > <a class ="navbar-brand" href ="/" > Logo</a > </div > <div class ="collapse navbar-collapse bs-navbar-collapse" > <ul class ="nav navbar-nav" > <li > <a class ="bg bg-green" href ="/" > Home</a > </li > <li > <a class ="bg bg-green" href ="/page1.php" > Page 1</a > </li > <li > <a class ="bg bg-green" href ="/page2.php" > Page 2</a > </li > <li > <a class ="bg bg-green" href ="/page3.php" > Page 3</a > </li > <li > <a class ="bg bg-green" href ="/page4.php" > Page 4</a > </li > </ul > </div > </div > </div > <div id ="pg-1" class ="container common-wrapper" > <div class ="row" > <div class ="col-xs-12 pole-content-holder" > <div class ="pole left" > </div > <div class ="pole right" > </div > <div id ="pole-heading" class ="center-div" > <h1 > Page 1 <img src ="/assets/img/icon-pg1.png" /> </h1 > </div > ...
The html above works, then I try move the dropdown menu down to the DOM element level by level.
Finally, I found out this might be the view overlapping issue. Then I realize the .navbar
z-index
was set to 1000 . i.e.
1 2 3 4 .navbar { z-index : 1000 ; ... }
Now, I move the dropdown menu to the original place, then change the css
1 2 3 .pole-content-holder > #pole-heading { z-index : 1001 ; }
Just ONE line of code, solve my issue that makes me struggle for hours. This may not be exactly your case,
I’m just share how I debug and found the solution, hope this can be a guideline for you :)