Dropdown menu is not expanding on mobiles with bootstrap 3 theme

Same issue here. Any news?

Same here! doesn't work at all for me

Verified with Bootstrap 7.x-3.0 and TB Mega Menu 7.x-1.0-beta5.

The bootstrap theme nav collapse toggle button HTML:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
</button>

note that the data-target specifies a class and not an id like the Bootstrap example code, see http://getbootstrap.com/components/#navbar

The TB Mega Menu collapse toggle button HTML:

<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar tb-megamenu-button" type="button">
   <i class="icon-reorder"></i>
</button>

The data-target selectors don't even match, and yet I still get a collapse.show() event thrown for the TB Mega Menu target.

same issue here...not found any solution.

It's the same with omega themes: tb_megamenu does not show

This may or may not be the perfect way to fix this but it does fix it.

The collapse class is getting added in the tb-megamenu-frontend.js file when the site scales below 980 to hide the full menu. see below.

 Drupal.TBMegaMenu.supportedScreens = [980];
  Drupal.TBMegaMenu.menuResponsive = function () {
    var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
    if (windowWidth < Drupal.TBMegaMenu.supportedScreens[0]) {
      $('.tb-megamenu').children('.nav-collapse').addClass('collapse'); <--------------------right here
    } else {
      var navCollapse = $('.tb-megamenu').children('.nav-collapse');
      navCollapse.removeClass('collapse');
      if (navCollapse.height() <= 0) {
        navCollapse.css({height: 'auto', overflow: 'visible'});
      }
    }
  };

but it never get removed, so nothing shows.

I edited the toggle button to take off the collapse on first push. ( also fixed small type menuIstance ->menuInstance )

  Drupal.behaviors.tbMegaMenuAction = {
    attach: function(context) {
      $('.tb-megamenu-button', context).once('menuInstance', function () {
        var This = this;
        $(This).click(function() {
          if(parseInt($(this).parent().children('.nav-collapse').height())) {
            $(this).parent().children('.nav-collapse').css({height: 0, overflow: 'hidden'});
          }
          else {
            $(this).parent().children('.nav-collapse').css({height: 'auto', overflow: 'visible'}).removeClass('collapse'); <--- fixed added here
          }
        });
      });

I submitted a patch

I applied the patch but that did not provide an immediate solution. In my case this solved the problem:

@media screen and (max-width: 767px) {
  .navbar-collapse.collapse {
    display: inline;
  }
}

Bootstrap has display: none; there. The reason for this conflict is that bootstrap hides the menu and brings on it's menu for smaller screens.

Hi All,

Thanks for your issues. We fixed this bug on the latest dev version.

I tested it. Now it's run well on bootstrap theme (7.x - 3.0). You can update to the latest dev version on 5 March 2015.

Thanks for your issues

I've just undated the the latest dev version and the issue is still not fixed. On bootstrap 7.3.1 with the latest Dev for TB mega menu on mobile or under width 767px a menu button from bootstrap appears at the top; when it is clicked another button from TB Megamenu appears.

I have the same issue as #11 with 7.3.1

I have the same issue too as described in #11 with 7.3.1. Any solution to this?

For me, I had to enable jQuery update to make drop-down work. Looks like this should possibly be a dependency.

I had to enable jQuery update, too.

I had the same exact issue with the bootstrap theme responsive menu not opening, as soon as I installed and enabled the Jquery update module it works perfectly now. thank you.

So, as a follow up to this - the underlying issue here is that jQuery needs to be available for this to function. The (arguably) simplest way is to use the jQuery update module, but there's always a chance that you may have a theme, module, etc. that conflicts with jQuery update, and in that case, you'd want to add jQuery in the .info file of your theme/module, making it available in some other way to the site.

Same here, installed and enabled the jquery_update module and everything worked like a charm!