Bootstrap Theme

Hi Studira,

Sorry for late reply, we will have a look at this issue and keep you posted. Thanks for your informing!

Same here. It would be a great enhancement if this module would work with the Bootstrap module, given that they both are leveraging the power of TB.

Overall this is a great module and I love the back end. Great work!

I am also experiencing many issues with tb mega menu (7.x-1.0-beta2 ) installed in conjunction with the bootstrap theme. I posted this issue which pertains to font-awesome in conjunction with bootstrap.

I am also having trouble with the menu system on smaller screen sizes, specifically mobile and tablet portrait. I solved some issues by working with the css, but as of this moment I have three main problems:

1. When the menu is opened on 'mobile' (max-width: 480px), clicking or tapping the menu icon does not close it.
2. The submenu top levels show as expanded. This may not be a bug, but ideally I would like to have the submenu be collapsed, not showing the third level items. See my explanation below.
3. On iPad portrait resolution (max-width: 979px), and only on the iPad itself, first click of the menu button opens the menu, but compressed to an approximately 60px wide column. Clicking the menu button again causes it to display properly. Clicking a third time closes the menu.

Explanation for problem #2 above. This is how the menu appears by default:

Menu Item 1
-> submenu item
-> submenu item
-> submenu item
Menu Item 2
-> submenu item
-> submenu item
-> submenu item
Menu Item 3
-> submenu item
-> submenu item
-> submenu item

I would like to see this by default:

Menu Item 1
Menu Item 2
Menu Item 3

Clicking on a menu item would then open it up, as in default bootstrap:

Menu Item 1
-> submenu item
-> submenu item
-> submenu item
Menu Item 2
Menu Item 3

I look forward to any progress you can make on this issue. I am hoping to put this menu system into a production web site, and it is so far the best option for integrating blocks and customizing menu structures. Keep up the great work!

Hi All,

In fact, this module would complete bootstrap theme.

There is an open issue at Bootstrap Theme (https://drupal.org/node/1893532)

And I think that TB Megamenu would solve it.

I have both on a local project and trying to figure out what is happening, feel free to help :)

Hello All,

the bootstrap theme page.tpl comes with the primary nav inside the container inside the navbar

<div class="container">
      <?php if (!empty($primary_nav) || !empty($page['navigation'])): ?>
        <div class="nav-collapse collapse">
          <nav role="navigation">
            <?php if (!empty($primary_nav)): ?>
              <?php print render($primary_nav); ?>
            <?php endif; ?>
            <?php if (!empty($page['navigation'])): ?>
              <?php print render($page['navigation']); ?>
            <?php endif; ?>
          </nav>
        </div>
      <?php endif; ?>
    </div>

Just remove the the primary nav from it as per the below:

<div class="container">
      <?php if (!empty($page['navigation'])): ?>
        <div class="nav-collapse collapse">
          <nav role="navigation">
            
            <?php if (!empty($page['navigation'])): ?>
              <?php print render($page['navigation']); ?>
            <?php endif; ?>
          </nav>
        </div>
      <?php endif; ?>
    </div>

Clear the cache and refresh, you will not be able to see the menu.

Open the structure > blocks you will see the TB Mega Menu: Main menu available.
Put inside the navigation region and refresh, now you will be able to see the menu when you refresh.

TB Mega Menu comes with 3 different styles, you will need to choose one of the available styles or rework the styles as you wish.

----- UPDATE -----

Hello All,

I just updated this so other people know that the solution I provided is for bootstrap 2.3 and not 3.0.

I did not use bootstrap 3.0 yet to know how to solve it

Using the latest bootstrap 3.x and latest tb_megamenu I'm not able to get this module working. Used the method described above, and screenshots attached. It looks like the links are in the dom, but not placed properly somehow. Also- the only color/theme that seems to be working is blue- but still without the links.

I´m getting the same black block aswell.

I never came back to this- when we took another look it seems this is a css issue for v3:

.tb-megamenu.tb-megamenu-main-menu .collapse {display:block;}

Hello Everyone,

I am new to theme development. Currently working on integration of tbmegamenu in bootstrap3. Facing same issue as described in comment #7.

Regards,
Priyanka

#9 Solved the issue with my theme, i am using bootstrap 3.

Having the same issue as #7. If you use Firebug to remove the "collapse" class from:

<div class="nav-collapse collapse always-show">

you will be able to see the links.

It would be nice if there was an option to render the menu without such heavy themeing as well.

The bootstrap theme defined .collapse with display: none;.

I don't know if this is the right way to fix this, but I added two display:block's in the CSS where needed to resolve this.

I had the same issues. I followed the advice of mstef and it worked. I can now see and use tb_mega menus. Until a better solutions come, i will make do with that for now. Thanks mstef.

I applied mstef's patch in #2015515-13: Bootstrap Theme and it did not work for me. Still see a black background and the menu is covering the logo. Also would like to see a patch that removes the navbar collapse button option for mobile devices; tb_megamenu already has one.

Patch #13 works on my site with bootstrap 3.0.

It's css issues, add this css code to visible/work menu
.tb-megamenu.tb-megamenu-main-menu .collapse {display:block;}

With Patch #13

?

#9 fixed it for me..

I just added this in css/style.css on the bootstrap subtheme

.tb-megamenu.tb-megamenu-main-menu .collapse {
  display:block;
}

HTH

Patch in #13 works on Bootstrap 3.0.

#9 Worked for me on vers 3.0. Only thing I did different was add it to the local.css in case I ever upgrade and forget where in the heck I made the fix.

Thanks for the awesome theme and community support. This is my first post on drupal after lurking and learning the system for awhile now!

The above zip file is wrong, use this instead: https://www.drupal.org/files/issues/tb_megamenu_0.zip
It seems I'm unable to remove the file from the table

I made a patch that turns tb_megamenu into a true Bootstrap 3 extension, it doesn't load bootstrap CSS on the frontend anymore, so you are responsible from loading bootstrap, in your theme or oterhwise.
The patch is not a full conversion to a stable Bootstrap 3 release, due to time constraints I could only make a working module and the patch needs cleanup. It also seems that the menu icons are not working, not sure if that was working fine before my work.

To get icons to work you need to load Font Awesome 4.x as well, I do this using the jsdelivr module, which leverages top tier CDNs (for free): https://www.drupal.org/project/jsdelivr

This patch makes all columns work in a responsive way, fully integrated with your Bootstrap 3 theme if you do any theming. In case you are not comfortable with applying patches I added a zipfile with a patched module, this zip also includes drag and drop functionality for columns and rows in the backend, using some JS I took from another issue in this issue queue.

Sponsored by sooperthemes.com for development of Glazed theme: http://www.sooperthemes.com/drupal-themes/glazed
Menu can be seen in action here: http://glazed-demo.sooperthemes.com/

#24 works for me even with Bootstrap 7.x-3.x-dev.
Thanks a bunch Jurriaan for contributing this patch and the zipped module.
Great work, you made my day!

@JurriaanRoelofs Is the glazed theme using this module as packaged in the zip. The demo of glazed appears to work, but when I add the module, I'm still having JS issues.

@JurriaanRoelofs I am having some trouble getting the patch to apply cleanly, getting WSOD. Also, when using the module provided the backend changes break the UI for me. Not sure what they were trying to address.

Really, I am just looking for the nav button integration with Bootstrap 3. That part works great!

Can you make a patch that only addresses that narrower problem?

Thank you for your help.

@sethmac yes the zip file is based on my sandbox for the Glazed theme.
Maybe you need to change your jQuery update version? Bootstrap 3 requires new versions of jQuery which differ even between 3.x releases. The Glazed demo site currently uses jQuery 1.8.

I am new to drupal. The community is really great. The solution from JurriaanRoelofs does work well on mine. Thank you!

Where I need to apply the #13 patch? in my subtheme? in the module? The patch in integrate in beta version of module?

I download the #29 module version and the menu show the main elements but dont show any sub menu and dont show the button to hide and show in mobile size.

Where is the problem? im try adding the css change in my subtheme less files and compile, nothing change.

Hi All,

We fixed this bug on the latest dev version. Now tb megamenu is fine on the bootstrap theme.

Please check it now and post the issues if you have any issues about TB Mega Menu.

Thanks for your issues.

Can confirm it's working for me. Great work!

@comment #32 ... Sorry to say, this isn't fixed for bootstrap 3.x-dev 2015-Jan-14 -- However, it may work for boostrap 7.x-3.0 from 2013-Nov-17...

Nevertheless #29, even though it doesn't fully work but work, it still works better than TB Mega Menu 7.x-1.x-dev 2015-Jan-21

...

@JurriaanRoelofs, thanks, #24 works for me for bootstrapCDN v3.0.2

#24 works for me. Thank you!!!

The issue with the Bootstrap theme is that the mobile menu display is hard coded into the template page.tpl.php ... Therefore one would either have to alter the Bootstrap page.tpl.php or alter TB Mega Menu to use Bootstrap page.tpl.php instead of calling it's own mobile menu...

Here you go... Rewritten the latest Dev version (2015-Mar-12) to use boostrap 3.x instead of 2.x

TB Mega Menu 7.x-1.x-dev w/ Bootstrap 3.3.4

This can be used as standalone or with the Bootstrap theme....

If you want to use this as standalone, then uncomment the following lines 243-245 tb_megamenu.module:

<?php
   // /* Uncomment if you don't have bootstrap 3.x installed */ tb_megamenu_add_css(drupal_get_path('module', 'tb_megamenu') . '/css/bootstrap.css');
   // /* Uncomment if you don't have bootstrap 3.x installed */ tb_megamenu_add_css(drupal_get_path('module', 'tb_megamenu') . '/css/base.css');
   // /* Uncomment if you want to use original style and animation */ tb_megamenu_add_css(drupal_get_path('module', 'tb_megamenu') . '/css/default-original.css');
   tb_megamenu_add_css(drupal_get_path('module', 'tb_megamenu') . '/css/default.css');
?>

To see an example of this, look here

(The active color is green instead of red; attached uses red).

NOTES:

I removed the animation, but you can add them back by uncommenting this line:

// /* Uncomment if you want to use original style and animation */ tb_megamenu_add_css(drupal_get_path('module', 'tb_megamenu') . '/css/default-original.css');

Or you can take the animation code from that css /css/default-original.css

**********

If you want to use the same 'home' and 'search' nav items with big icons, do the following settings:

Home:
Extra class: nav-home
Icon: glyphicon glyphicon-home

Search:
Extra class: nav-search
Icon: fa fa-search
Submenu: yes
Blocks: Search form

**********

When configuring the menu, the items don't get properly updated via ajax (live display of field items)...
Workaround: Just hit save and reload the page after each change... (you can still make multiple edits at once, but keep in mind you'll see previous field values in newly select menu items--I don't think they are saved, they just display)

**********

IMPORTANT NOTE:

I noticed that overwriting the 7.x-1.0-beta5 version with this DEV, erased all my TB Mega Menu settings/setup. Meaning, there's a chance that you'll have to re-setup your menu(s) again in the admin. I had a backup for reference, so it was pretty quick copy/pasting from the backup...

**********

And lastly... I probably won't be here (at least in a timely manner) to offer additional support.

@DUNTUK. Great work. I'm in desperate need of a megamenu style solution for the Bootstrap theme but am reluctant to implement an unmaintaineed solution. Any chance you could elaborate on the changes you made to get it to work ?

Thanks

To be honest, this wasn't very difficult to accomplish--took about 1 day once I was able to wrap my head around this module. The developer of this module probably can just as easily update this module if really wanted--or just use my version and clean it up a bit (e.g. give user an option in the admin to include bootstrap 3.x files or not; or use the ability to detect the bootstrap library (like I'm using with the bootstrap theme)

Anyhow...

These are the changes

• Updated all bootstrap css/js files with latest Bootstrap 3.3.4 versions. ** This is only necessary for those using it as standalone, without bootstrap 3 theme or library **
• Updated chosen.jquery.js to latest version
• Replaced all reference Bootstrap 2.x classes with 3.x ones
• Replaced the default.css theme (bootstrap 2.x) with a custom one I coded with about 80% less bloat.
• Removed all bootstrap css/js includes to the frontend, and made a note (above) stating what to uncomment if you wanted to use this as standalone.
• For more detailed info, please use a folder/file compare program (e.g. Araxis Merge).

Side note:

You may need to drop this into your bootstrap sub-theme page.tpl.php

Here is another site I just finished using the bootstrap theme (dev) along with my Bootstrap 3.3.4 version of this TB_megamenu for a related company: Fernco

@duntuk. Thanks for the superfast clarification. I've dropped in the page template but I'm pretty sure it needs the navbar content needs excising as per #5, as I'm seeing 2 menus. I'm also seeing errors :

 Notice: Undefined variable: container_class in include() (line 144 of /home/worlsha4/public_html/thedomain.co.uk/sites/all/themes/pmboot/templates/system/page.tpl.php).
    Notice: Undefined variable: container_class in include() (line 191 of /home/worlsha4/public_html/thedomain.co.uk/sites/all/themes/pmboot/templates/system/page.tpl.php). 

I REALLY hope the module maintainer moves forward with this so it is a properly supported and maintained option .......

For the above error, I'm assuming that's probably because you're not using the Bootstrap DEV version.

@JurriaanRoelofs thanks for the solution! Quick question though, this thread focuses on the Bootstrap sub theme has any one tried the mega menu module from post #24 in a custom built theme that utilized Bootstrap for the front end? Utilize the module from #24 it get the menu to work but the drop downs appear to be stuck in my navigation container. I haven't found a way to fix this. Is the consensus that this module should be used in a Bootstrap sub theme?

Thanks!

@duntuk the file tb_megamenu-7.x-1.x-dev-bootstrap3.3.4..zip, have error in coding and can not open.

Hi,

None of the above files can be unzipped on my system?

https://www.drupal.org/files/issues/tb_megamenu-7.x-1.x-dev-bootstrap3.3...
https://www.drupal.org/files/issues/system.zip

Thanks...
Just Remove the collapse in menu or add the css like :
.tb-megamenu.tb-megamenu-main-menu .collapse {
display:block;
}

#39 work for me. Thanks!, why this has not been ported to the final version yet?

As far as I can tell, none of the patches / ports actually seem to work.

Does anyone have code that does?

Eric

There doesn't seem to be motive from the developer to make progress with this module.

Example:
TB mega menu has been using outdated bootstrap 2.x version (3.x has been out for years; 4.x is on horizon) and never made any attempts to port to 3.x (which I did fairly easily (above) with the previous versions of this module [which did work at the time]).

Nevertheless, 8.x version is too buggy (improper sorting of menu items)... also been pulled due to copyright issues.

******

Considering this is a bootstrap reliant module. One would assume that it would tightly tied into current bootstrap versions, however it's not...

@duntuk , agreed it seems like a dead end. I will probably hard code the menu in HTML as I've actually gotten that to work. Its not the Drupal way, but...

Thanks,
Eric

Haven't tried this, but figured I'd share this link that comes up in reference to this issue:

TUTORIAL: DRUPAL MEGA MENU WITH BOOTSTRAP 3.X+ AND JQUERY

deleted, because I started a new issue.