Conflict with toolbar in some environments

Hi there, I tried to replicate your issue with the MAYO theme but its working fine with a fresh install. Did you place the blocks in a region? Can you detail your steps so I can replicate the issue?

The image below is a screenshot of my local with the admin menu and the mayo theme and shows the toggle icon placed in the header area.

@dzinelabs I did a fresh install with drush si and then enabled the responsive menu module. I already had the libraries downloaded using bower and moved to [web_root]/libraries

I then enabled the MAYO theme and then placed the 'Horizontal menu' block and the 'Responsive menu mobile icon' block in the header region.

Navigating to the home page I could see the toggle icon and clicking it revealed the mobile menu.

I didn't need to configure any settings on the responsive menu form as the defaults were sufficient.

@maxmannen I can get this module half working with Bootstrap 3. There is some quirky behaviour with Bootstrap 3 in that the navigation region doesn't get wrapped in the mmenu page wrapper. The other issue is that the mobile toggle can be really hard to see as it defaults to white and when placed on bootstrap's light grew its almost invisible. See screenshot below.

@maxmannen I was able to get it working perfectly with Bootstrap 3 (dev) by adding a wrapping div around all the elements in the page.html.twig file. So this appears to be a requirement for the mmenu plugin which I'll need to explain to themers in the instructions.

@dzinelabs also check that you've definitely added both blocks as the 'Horizontal menu' block is the one that adds much of the javascript to the page.

Hi, I after install module the admin toolbar error

http://progra.d8.swproyectos.com/jdiaz/tradiciones/error.png

@dzinelabs i try you answer but the problem exist.

When i unistall the module admin toolbar is ok, and later clear full cache and all ok, when i try install again the module responsive_menu, the install is ok, but when i try clear full cache again, the admin toolbar is broken.

@dzinelabs no problem at all! Really good bug report, helps me understand the issues. The white background is an easy one to resolve. That's because of the default css that comes with the module, it adds a white background to the element with an mm-page class. The idea is that you should customise the css in your theme and disable the css that comes with the module (a checkbox in the settings) but on a default install the css is included so there is at least some basic styling.

The admin menu seems to be harder for me to debug but I'll continue looking.

@dzinelabs I've been able to replicate your issue to some degree but only in Firefox and only when the admin menu is in vertical mode. Whilst in horizontal mode it is positioned fine but switching to vertical and opening the responsive menu panel causes the admin menu to move down. Could you please test on Chrome and let me know if the admin menu positioning problem is still there?

@userspan which browser are you using? Could you try with other browsers and report back?

I've just pushed a fix for the one Firefox rendering quirk I can replicate which was pushing the vertical oriented toolbar down whilst the responsive menu panel was open. Could you both test to see whether it resolves your toolbar positioning issues?

@tanc, @dzinelabs this is my error with the install module

http://progra.d8.swproyectos.com/jdiaz/sothys/menu_responsive.mov

The browser is firefox 45.0.1 and chrome the last update

And end the video this error in debuggin

Warning: file_get_contents(/modules/responsive_menu/js/views/BodyVisualView.js): failed to open stream: No such file or directory en Drupal\Core\Asset\JsOptimizer->optimize() (linea 30 de /var/www/vhosts/core/lib/Drupal/Core/Asset/JsOptimizer.php).

And page not found /libraries/hammerjs/hammer.min.map
Tanks

@userspan, thanks for the video, that is very helpful. So it looks like the module isn't loading its js/views/BodyVisualView.js file after a cache rebuild. Unfortunately I can't replicate this locally. Can you double check you definitely have that file in the responsive_menu module? Looking at your error it looks like it should be in /modules/responsive_menu/js/views/BodyVisualView.js

Otherwise I'm not sure what else can be causing this issue. Maybe a list of 3rd party modules you have installed may help? I've tried to replicate your set up by installing admin_toolbar module but it wasn't a conflict with that. Any other hints would be useful. Thanks!

@tanc in fact the error is line 67 in www.sitename/core/modules/toolbar/js/toolbar.js Drupal.toolbar.views.bodyVisualView = new Drupal.toolbar.BodyVisualView({
In your module when install replace the js of core by your module, but when i clear all cache dont replace again the file and when try load the js show the error.

The patch or error is in localhost/sitename or www.yoursite.com/sitename.

Apply this patch in responsive_menu.module line 230 funtion name
function responsive_menu_library_info_alter(&$libraries, $extension) {

change to this code

function responsive_menu_library_info_alter(&$libraries, $extension) {
if ($extension == 'toolbar' && isset($libraries['toolbar']['js']['js/views/BodyVisualView.js'])) {
//unset the core BoyVisualView.js
global $base_root; //New line
unset($libraries['toolbar']['js']['js/views/BodyVisualView.js']);
$new_path = $base_root . base_path() . drupal_get_path('module', 'responsive_menu') . '/js/views/BodyVisualView.js'; //New line
if (isset($new_path)) { //New line
$libraries['toolbar']['js'][$new_path] = array();
} //New line
}
}

@userspan that's interesting, so by making the script load from an absolute url it works for you?

Adding the $base_root global will change the script from a relative path like:
<script src="/modules/responsive_menu/js/views/BodyVisualView.js"></script>
to:
<script src="http://mytestsite.com/modules/responsive_menu/js/views/BodyVisualView.js"></script>

If you don't add $base_root so you have a relative path, what does your page source show for that script tag? It seems odd to me that a relative path wouldn't work, especially as all the other modules and core javascript use relative paths.

@dzinelabs no problem about testing and time. Regarding the css, the idea is that the module provides some css which covers the basics but as a themer you should really provide your own css. There is no way for the module to know what colours your theme would implement, what kind of layout your menu would take etc. So you should be copying the module's css into your theme, disable the module's css using the checkbox and then modify your theme until you get the result you want.

@dzinelabs and @userspan how are you hosting your development site? Are you using a custom local set up or something like Acquia's dev desktop? I really need to replicate your set up so I can see what is causing this toolbar issue.

Right! I've finally managed to replicate the issue. I realised that you are both probably running your sites in a sub directory and setting your RewriteBase in your htaccess (at least thats how I did it).

This then showed me the issue which is the base_path() that I was using to make the replacement js relative was returning the RewriteBase which in turn caused the file not to be found. So I've replaced it with a basic slash which then allows the relative path to work properly, no matter whether using a top level domain or a sub directory.

I've pushed a fix so please test it and report back, but I'm pretty confident that is the issue resolved.

@dzinelabs just grab the latest development version. Once you confirm its fixed the issue I'll release 8.x-2.1

@dzinelabs thanks for testing. Which OS and browser are you using on the Samsung Tab 4?

Does the mmenu plugin work fine for you here: http://mmenu.frebsite.nl ?

@dzinelabs it sounds like the admin toolbar issue is working fine for you now so I'm going to make this as fixed. Regarding the zoom issue, I've opened this other issue for that: #2698657: Zoom disabled by hammerjs on Android

Could you re-open that case and continue the conversation there if you're still having issues?

Marking this one as fixed