1

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:

enter image description here

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

Community
  • 1
  • 1
Guillaume
  • 2,752
  • 5
  • 27
  • 42

6 Answers6

2

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
Community
  • 1
  • 1
Guillaume
  • 2,752
  • 5
  • 27
  • 42
  • it is working on desktop with small screens. but still not working on mobile with touch screens.Pls help.I am stuck in these since last few days. – Ankit Ostwal May 25 '16 at 04:53
  • I havn't found a better solution at this time, but if I find it I will share. – Guillaume May 25 '16 at 09:30
  • @Guillaume I had a similar issue that turned out to be a `col-xs-10` that was wrapping my dropdown. For some reason, once I deleted this wrapper class, the problem went away! In your case, it may or may not be that particular class but if you try removing as many classes on parent elements as you can and seeing if it works on mobile, perhaps that will reveal if you have a similar problem with a parent class. – Bryan Miller Jun 23 '20 at 04:06
0

The error that i found.

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

DEMO

Fiido93
  • 1,918
  • 1
  • 15
  • 22
0

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')
 } })
  }
Roddy P. Carbonell
  • 858
  • 1
  • 11
  • 16
0

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.

rp123456789
  • 1
  • 2
0

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.

Atanas Beychev
  • 111
  • 3
0

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.

Amit Pathak
  • 1,145
  • 11
  • 26