Custom breakpoints

I was quite surprised by the behavior in the iPad, so yes I completely agree.

Is it possible to manually change this somewhere in the module files. This would be great help

Please can someone implement this, the menu converts to the minified menu far too early!

This is a big issue for me at the moment as well. As far as I can see from having a poke around the module files it's controlled via JS? Slightly confused as to why it's not a straight css3 media-queries display / hide. Can a maintainer at least point me/us in the right direction on how to temporarily hack this?

Count me in on this as well, if there are two things this awesome module is lacking (and it is awesome)

1) The ability to set the width of sub-menus in percentages so this can be responsive.

2) The ability to control at what px size the mini menu button appears, should be 320px and less. And since we can now set options of when submenus appear, it seems the module could use the logic (submenus don't always appear? only show mini at less than [entered value by user])

Yes, this would be excellent! This module had all the features I needed for desktop - thank you so much. I'm just having problems with the responsive aspects.

When I opened the first main menu tier, I wanted the second-level main menu to remain hidden until its parent was clicked. I couldn't get that to work, so I chose to use mobile_detect and mobile_navigation to switch out main menus on "actual" tablet and smartphones.

Now, I only have desktops using TB Mega Menu. It would be great to wipe-out the minified menu for the entire tablet spectrum (my tablets won't ever see this). I'm seeing that desktop odd-sized windows (not maximized) are getting the minified version. I'd like to keep the full mega menu look until it degrades (at least to 768px). Having control over media breakpoints would be fantastic!

And/or more control over how the sub-menus are hidden/appear would allow me to use TB Mega Menu instead of the other modules at phone/tablet sizes. (but this last thing is off topic here).

Thanks for any direction you can provide,
Heidi

I did some further digging and from what I can tell, the breakpoints are all in CSS. The mobile menu dropdown is visible below 980px and is just display=none at wider points.

While this doesn't give customizable breakpoints as desired, I was able to modify my menu so it only breaks into responsive below 480px (smartphone landscape). Again, I use a different menu on true tablet and mobile devices and megamenu only on desktops.

To summarize my process, I did a search in all of the css files for 979px and 980px since those are the points where mine was going to responsive. I hid all of the media queries in the tablet range (with min and max in that range) and moved the min-width only or max-width only media queries to fit my needs. Afterall, I still wanted the responsive, just at a smaller 480px and below window. The key files were default.css, compatibility.css, boostrap.css and base.css. Black, green and blue would need modification, if I used those.

There were a few adjustments I needed to make in my menu after I got it back to megamenu in the tablet range. I had to overwrite the width of the sub-menus (the mega menu piece) to auto with an !important indication in my theme's responsive css files. I use Adaptive Theme. Otherwise, it was using the element style width of 976px that I set in the TB Megamenu Submenu Configuration screen for "Submenu width".

For proof of concept, I just made these changes in the module css directly. So now I need to figure out the correct way to override the modules's css files in my theme to future-proof the changes.

I don't like doing all of this hokeying around, but I can't have a resonsive menu at 900px on a desktop. If anyone has a better solution, I'd really like to hear it.

I'm happy to share my css hacks if that would be helpful to anyone.

Yes, this is the one major problem I've had with this module as well. It would be very nice if these widths could be set in the UI, but this might be more trouble than it's worth.

Most everything can be managed by overwriting the CSS, but the button toggle is managed using javascript (which makes sense). The code I've found is:

$('.tb-megamenu-button').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'});
        }
      });

The problem I'm having is that I can't figure out how to change the width as which that javascript becomes active. I know the width is set at 979px by default, but I can't find where to change that. If anybody knows where you change that and how to override it in your theme please let me know.

Thanks!

Figured it out. It was all because of some CSS at the end of bootstrap.css.

@media (min-width: 979px) {
  .tb-megamenu .nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
  }
}

I changed the min-width on that and added the following as well to my max-width:

.tb-megamenu .nav-collapse {
	height: 0;
	overflow: hidden;
  }

The javascript above looks for those values to tell if it needs to hide the menu or show the menu.

That's brilliant deggertsen, works for me.

If anyone else tries this, you may find that your menu overflows over the window if you go below 940px wide - it stays fixed width along with the columns. To amend that change line 188 of tb_megamenu.themes.inc from:

$vars['attributes_array']['style'] = "width: " . $submenu_config['width'] . "px;";

to:

$vars['attributes_array']['style'] = "width:100%;";

Your menu should now scale to fit the new window width.

deggertsen - sounds like a promising solution. Can you clarify just a bit more what line(s) in bootstrap.css you made these edits to? Or if I misunderstood your post, what changes you made?

Thanks!

Well, I upgraded tb_megamenu and blew all my custom CSS away. And yeah, it was a few days ago so the back up is not easily accessible. Lesson learned.

So I'm trying deggertsen's suggestion since it seems way easier. I'm not entirely clear on the specifics, either. I tried changing the media query size to line 3156 of bootstrap.css as follows:

@media (min-width: 307px) {
  .tb-megamenu .nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
  }
}

I'm just not sure what to do with the second section of css he/she mentioned.

For time's sake, I just hacked the CSS up again like I mentioned in #8. Now I'm keeping an extra copy of the css from that module so I don't lose it again :)

In case it helps someone else, I've attached my new default.css, base.css, bootstrap.css, and compatibility.css from the TB_Megamenu/css folder. The tb_megamenu_responsive.css is in my theme css folder and has the actual breakpoints for my site (307px and below get mobile nav).

These probably represent more hacking than needed, but it works until I can get something better.
Heidi

I had to add a txt extension to upload to D.o

Despite my comments at #1, maybe the people at themebrain are ahead of the curve here. I am increasingly seeing the hamburger icon as a nav element instead of text based menus. Just a thought.

It looks like a patch is being worked on which will separate the responsive styles out into their own stylesheet and possibly allow you to disable the responsive styles (https://drupal.org/node/2029917). This means that instead of hacking the CSS and potentially losing it when upgrading the module we can disable the responsive stylesheet and simply copy it into our theme and edit it to our needs. If the functionality to disable the responsive stylesheet is not created it easily can be removed with hook_css_alter

I have found the easiest way to stop the responsive menu when using the deafult style is to set the @media max-width at line 1375 of default.css to 0.

One simple change appears to stop it completely.

Really hope a setting is implemented in a new release as I hate adjusting files like this.

Hi All.

Thanks for your issues and files CSS. Now the current version don't support responsive well. we will review files CSS from you and we will implement the new feature which support responsive in the future.

Thanks All

Hey guys, a quite smaller/quicker "hack" to remove responsiveness which I just tested is to remove the button element and all classes from the navbar div in the templates/tb-megamenu.tpl.php file.

This way the responsive CSS is never applied to any elements. Obviously this is an extreme hack as now there's stray code just sitting there not being used but it's definitely easier and quicker than migrating the responsive css.

original tb-megamenu.tpl.php:

  1 <div <?php print $attributes;?> class="<?php print $classes;?>">
  2   <?php if($section == 'frontend') :?>
  3     <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar tb-megamenu-button" type="button">
  4       <i class="icon-reorder"></i>
  5     </button>
  6     <div class="nav-collapse collapse<?php print $block_config['always-show-submenu'] ? ' always-show' : '';?>">
  7   <?php endif;?>
  8   <?php print $content;?>
  9   <?php if($section == 'frontend') :?>
 10     </div>
 11   <?php endif;?>
 12 </div>

new tb-megamenu.tpl.php:

  1 <div <?php print $attributes;?> class="<?php print $classes;?>">
  2   <?php if($section == 'frontend') :?>
  3     <div>
  4   <?php endif;?>
  5   <?php print $content;?>
  6   <?php if($section == 'frontend') :?>
  7     </div>
  8   <?php endif;?>
  9 </div>

I used drootsads hack because i like small and quicks hacks.
But in addition i had to to change the default.css at line 1556 the max-width to 767px to make the megamenu working without bugs at a resolution form 768px to 980px.

To really modify the supplied tb_megamenu css files in a clean way in our custom theme, i used this hook in a custom module:

function mymodule_css_alter(&$css) {
  if (isset($css['sites/all/modules/tb_megamenu/css/default.css'])) {
    $css['sites/all/modules/tb_megamenu/css/default.css']['data'] = drupal_get_path('theme', 'my_custom_theme') . '/css/tb_megamenu/default.css';
    $css['sites/all/modules/tb_megamenu/css/default.css']['type'] = 'file';
  }

At mobile resolutions i than use the https://www.drupal.org/project/mmenu module which is pretty nice.

great silentbob!
Do you really mean that just changing default.css - line 1556 is enough to make the non-responsive menu showing up at lower resolutions?
Thanks!

Now in 7.x-1.0-rc2 the javascript toggle is controlled in tb-megamenu-frontend.js. In Line 6 you find:

Drupal.TBMegaMenu.supportedScreens = [980];

In my case I want the mobile menu be shown on iPads, too. So I changed the width from 980 to 1025. Besides that I had to adjust the css media queries, too.

can any one help me to change the breakdown point from 980px to something else like 1300px?

Quick and dirty solution for #24:
In the module folder go to
a) js > tb-megamenu-frontend.js

In line 6 you'll find:
Drupal.TBMegaMenu.supportedScreens = [980];

b) css > bootstrap.css

at the end of the file you'll find:
@media (min-width: 980px) {....

Change BOTH values to breakpoint value you like.

Just wanted to say i ran into this issue, and there are A LOT more breakpoints to change, you pretty much have to search through the entire css folder for 980px and 979px and adjust accordingly. you will need to really understand how breakpoints work...

if this system was built with sass/less in mind you could use one reference mix in which could be changed in one spot. something to think about?

From what I understand, the module sponsors/maintainers are back to focusing on the D7 version, so I hope they include a method in the UI of changing these break points.

Until then, this patch simply strips the tb_megamenu template of some of the classes that set these built in breakpoints, as suggested above in comment #19.

I have been dealing with the same issue and your comments have been very useful. Thank you all!
I just wanted to share that I have got the menu to work as I wanted changing line 6 in tb-megamenu-frontend.js and changing accordingly the @media in all css (base, bootstrap, compatibility and default).

I wanted the mobile menu to switch to a desktop menu from 992px onwards to coincide with Bootstrap's Medium devices breakpoint.

To do this I changed (i) 979px to 991px and (ii) 980px to 992px in the following CSS files:

1. bootstrap.css
2. default.css
3. base.css
4. styles/blue.css (my selected style, if you've selected another style then you'll need to update that)

And then changed 980 to 992 (on line 6) in the javascript file:

js/tb-megamenu-frontend.js

Thanks!

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.