Bootstrap v3.3.6 Dropdown not working with mobile menu

Question

I'm trying to solve this issue since few days. I have found so many solution but nothing works for me. I'm using bootstrap 3.3.6 and I would like to use a drop down menu. The code works fine on a desktop screen, but not in a mobile screen.

Here is a capture:

When I click on "Product", the global menu disapear, and I can't find the sub-menu.

Here is my code:

<!-- Navigation  -->
<nav class="navbar navbar-default navbar-fixed-top shadoww">
   <div class="container">
          <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand page-scroll" href="#page-top" style="width:250px;"><img src="img/logo.png" width="60%" style="margin-top: -4%;"></a>
                </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
        <nav class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                   <li class="hidden">
                      <a href="#page-top"></a>
                   </li>
                   <li>
                      <a id="translate0" class="page-scroll move" href="#home">Home</a>
                   </li>
                   <li class="dropdown">
                        <a id="translate01" href="#" class="dropdown-toggle move multiselect" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Product<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                           <li><a class="page-scroll move" href="#product">Description</a></li>
                           <li role="separator" class="divider"></li>
                           <li><a id="translate39" class="page-scroll move" href="#compat">Compatibility</a></li>
                        </ul>    
                   </li>
                   <li><a id="translate02" class="page-scroll move" href="#diapo">Gallery</a></li>
                   <li><a id="translate03" class="page-scroll move" href="#team">Founder</a></li>
                   <li><a class="page-scroll move" href="#contact">Contact</a></li>
                   <li><a id="popup" class="move" href="javascript://">Shop</a></li>
                   <li><a class="forum move" href="/forum/index.php" target="_blank">Forum</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                   <li>
                   <a id="flagA" class="navbar-brand" href="javascript:doTranslate('fr')" style="width:80px;"><img id="flag0" onclick="javascript:changeImage('fra')" src="img/France-Flag-50.png" class='changer' width="55%" style="margin-top: -4%;"></a>
                   </li>
                   <li>
                   <a id="flagB" class="navbar-brand" style="width:80px;"><img id="flag1" src="img/UK-Flag.png" class='changer' width="55%" style="margin-top: -4%;"></a>
                   </li>
                </ul>
        </nav>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div>
        <div id="successn"></div>
</nav>

I have tried the stopPropagation solution, but I think it's not a proper solution. I have also tried this solution but no way, still the same reaction.

Does someone have another idea ? (I know, so many questions about this problem...) Thx

Answer 1

If you are working with Bootstrap v5.1 then the following might fix the issue for you -

<nav ...
<button 
    class="navbar-toggler navbar-toggler-right"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown"
    aria-expanded="false"
    aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
...
</nav>

Replacing navbarResponsive with navbarNavDropdown at above 3 places did the trick.

Answer 2

I have exeperianced an exact problem and it was from the CDN version for the bootstrap.css. There was any changes required in the JS or CSS, just be sure usinfg the correct version for your navbar template.

Answer 3

Dont keep bootstrap.min.js in header file or footer file just keep in the file where u want dropdown.

example: keep bootstrap.min.js in index.php at bootom.Then check it in mobile vesrion.

Answer 4

My problem was that in the mobile version of my website, the dropdown menus appeared and disappeared as soon as I clicked on the main link. What I did was a little compromising, but it works. The file bootstrap-dropdown.js has a function called clearMenus, which is the one that closes the dropdown menus. What I did was making sure that the hack would not work for non-mobile devices. What happens now is that once you click on a dropdown link, it won't close. It is a good idea for mobile devices, but it is not good for tablets.

 function clearMenus() {
    $(toggle).each(function () { var isMobile = false;
        // device detection 
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) 
{ isMobile = true; }
   if(! isMobile) { getParent($(this)).removeClass('open')
 } })
  }

Answer 5

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

Answer 6

The error that i found.

i. Where is the attribute for data-toggle="collapse" data-target=".navbar-collapse" ?

DEMO