TB menu is automatically collapsed in Bootstrap 3.0 on normal display mode

I am experiencing the same issue with Bootstrap 3.0 as well.

Also seeing the same issue. As a short term workaround I've had some success replacing all the instances of .collapse in the module css with .tb-collapse, and then the same thing in tb-megamenu.tpl.php, replacing the two instances of collapse there with tb-collapse.

That doesn't seem like the correct solution though. It looks like bootstrap 3 changes the way the collapse class is used to display:none/display:block vs the height and overflow manipulation used in bootstrap 2 (and this module). So when you use bootstrap 3 with this module you end up with a display:none on top of what the module expects which just makes the menu disappear. The correct solution would likely involve updating the module's usage of collapse to match what is happening in bootstrap 3.

I will have to try that out as a short term solution. The project I am working on is currently in "production" with bootstrap v2.3.1, I was testing bootstrap v3 on my laptop with the same site.

Adding this in my CSS fixed the issue for me:
.tb-megamenu .nav-collapse.collapse {
display: block !important;
}
Now, the menu is not shown collapsed in the normal mode.

Solution proposed in #4 works here. Thanks for the workaround suggestion.

#4 worked for me. Thanks.

#4 is great! Many Thanks!

Based on the solution I provided in #4, I will create a patch for this bug.

The issue here seems to be a class selector conflict between the Bootstreap 3.0 theme css and the TB megamenu css.

Bootstrap css: http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css
The css rule at line 2619 in Bootstrap-3.0 css defines a rule for .collapse class which overrides a css definition in TB megamenu having the same selector (i.e. .collapse). It seems that this effect is unwanted. The patch is just trying to nullify it.

some one there to review the patch ?

#9 Works for me, going down the !important road as in #4 is usually a bad idea.

Also of note is the fact that Bootstrap 3 is no longer using span* classes to represent their column grids and instead are using the likes of .col-xs-,col-sm-, .col-md- and .col-lg-

I can see that the TB Mega Menu is still applying span* classes to output their columns in the mega dropdown so this is not working with Bootstrap 3 out of the box.

Any idea if there is a Bootstrap 3 compatible version that is in the process of being developed?

Many thanks for the patch, it takes me one day to fix that.

Guys in the beta-5 it is still broken

I just tried this with beta-5 and it works fine.

I tried tb_megamenu beta-5 with bootstrap 3.

With #9 it works well on normal browser width, but there is another issue for small width: https://www.drupal.org/node/2277725.
Thank you sachin_s!

Thanks Sachin. #9 works for me.

Thanks sachin.....This patch works for me.

Upgrading tb_megamenu to 7.x-1.x-dev works for me. It looks like it handles it properly, not hacking css.

In order to implement this fix the provided patch would need to be re-rolled so that it applies cleanly to the current 7.x-1.0-rc3 branch.

Thanks for the report and for contributing to the TB Mega Menu issue queue.

Drupal 7 reached end of life on January 5, 2025 and is no longer supported going forward.

As part of wrapping up Drupal 7 support for this project, issues that do not include a code-based resolution (including issues where the only patch is out of date and requires a re-roll) are being closed as Outdated as part of this cleanup.

This closure reflects the end-of-life status of Drupal 7 and the absence of an up-to-date fix we can act on, not the validity of the issue itself.

If the issue applies to a currently supported version of Drupal, please open a new issue with updated details.

Thanks again to everyone who contributed during Drupal 7’s lifecycle.