Top horizontal menu problem on mobile devices

[Jurgenpalland]

Hello,

 

When you visit my website www.promomakerij.nl on you're mobile, the module 'Top Horizontal Menu' doesn't work at all.

Does anyone know what the problem could be?

 

Thanks in advance

[JeredBolton]

Have you already fixed this?

 

I visited your site on my mobile and the Horizontal menu works as expected.

 

The menu also collapses down and works as expected when shrinking the width of a desktop browser window.

[Jurgenpalland]

Sadly it still does't work.

 

I've tryed it on my phone (android Huawei MAte S), the pc chrome browser, firefox and microsoft edge.

[JeredBolton]

Just want to check that we're talking about the same thing.

 

Here's what we see on desktop and mobile:

 

http://imgur.com/a/RrT9q

 

Could you post a screenshot of what you're seeing on Desktop and describe what you think you shoud be seeing on mobile?

 

We're not sure what you mean by "doesn't work"?

 

Is it that before the menu collapses to its mobile version, it breaks over two lines?

[Jurgenpalland]

i'm really sorry, i said www.promomakerij.nl but i meant www.croford.com.

 

I'm working on two different site's at the moment and its a bit confusing .

 

The menu from promomakerij.nl works perfectly fine, but the same menu from www.croford.com isn't working on mobile browsers.

 

Sorry for the confussion.

[Norwegian Rat]

Have you tried taking the CSS file from your working menu and replacing it (backup the original file) with the one that is not working? Might be a good (and easy) approach for debugging.

[Jurgenpalland]

Thanks for the advice, i'vce replaced both CSS files (blocktopmenu.css & superfish-modified.css) and this doesn't do the job .

[Norwegian Rat]

Force compile an no cache under performance enabled?

[Jurgenpalland]

i've forced compile and emptyt the cache.

The design has changed but it still doesn't work on mobile devices.

[Norwegian Rat]

Do you know if there is any *.tpl files for the menu module under the themes "module" folder? If so you can try switching this too with the one that is working. (Just make sure it's the same version of the module) If this is not working I think I would have uninstalled the module from site that's not working and installed the one that is working (in both root and themes) If it still doesn't work I would take a look at the module positions and hooks on the page that is working, and make sure the page that doesn't work looks just the same.

[JeredBolton]

Could be a javascript issue linked with the facebook module - I can't debug the topblockmenu javascript because firebug doesn't get to load any javascript but instead gives this error:

 

Application Error: There was a problem getting data for the application you requested. The application may not be valid or there may be a temporary glitch. Please try again later.

 

https://www.facebook.com/connect/ping?client_id=334341610034299&domain=croford.com&origin=1&redirect_uri=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FYGoENyUbMBG.js%3Fversion%3D42%23cb%3Df13357c0b8baa82%26domain%3Dcroford.com%26origin%3Dhttp%253A%252F%252Fcroford.com%252Ff293e30a0a4fec4%26relation%3Dparent&response_type=token%2Csigned_request%2Ccode&sdk=joey

 

Your other site isn't using the facebook module and is a difference worth investigating.

Edited January 24, 2017 by JeredBolton (see edit history)

[JeredBolton]

Also noticed a couple of things with your blocktopmenu.js file:

 

A couple of lines are missing from the ready function. Compare your working site:

$(document).ready(function(){
	categoryMenu = $('ul.sf-menu');
	mCategoryGrover = $('.sf-contener .cat-title');
	responsiveMenu();
	$(window).resize(responsiveMenu);
});

with the broken site:

$(document).ready(function(){
	responsiveMenu();
	$(window).resize(responsiveMenu);
});

However, the biggest difference is that the working site is using $(window).width() in the responsiveMenu function:

function responsiveMenu()
{
    if ($(window).width() <= 767 && responsiveflagMenu == false) {
        menuChange('enable');
        responsiveflagMenu = true;
    } else if ($(window).width() >= 768) {

Whereas the site with the broken menu is using $(document).width() in the responsiveMenu function:

function responsiveMenu()
{
   if ($(document).width() <= 767 && responsiveflagMenu == false)
	{
		menuChange('enable');
		responsiveflagMenu = true;
	}
	else if ($(document).width() >= 768)

Even if the window is shrunk down the document width can be far wider than window.

 

In this case my debugger shows that the document width is returning a value well over 2000 which is why the menuChange function is never called to activate the mobile menu.

 

By manipulating the width value in the debugger I can get it to call the mobielInit function and the mobile menu works as expected.

[Jurgenpalland]

Thank you all!

 

I've re-installed the complete module Horizontal Top Menu. This didn't fix the problem.

 

I've copyed the JS file from Promomakerij.nl to Croford.com, this also didn't work.

 

I've manualy added the missing lines to the JS file en chaned document into window..... didn't work.

 

I've deleted all social media modules, but stil on the top of the page the facebook logo is on the site.

I get the feeling the problem starts with that icon.

As far as i can see, this not a module, but i also cant find the correct file in witch i could delete the info.

[JeredBolton]

Have you cleared out all the cache files etc? I've just checked your site and it's still got the incorrect javascript that's using the document width.

[Jurgenpalland]

Yes i did clear the cache files ect.

 

After i noticed de chanches didn't work, i put the original files back. 

Just in case i  scrwed op something else.

[JeredBolton]

Please just fix the responsiveMenu function so that it uses $(window) - otherwise that bit of code will not work properly.

[Jurgenpalland]

i've just changed the code to:

 

function responsiveMenu()

{

   if ($(window).width() <= 767 && responsiveflagMenu == false)

{

menuChange('enable');

responsiveflagMenu = true;

}

else if ($(window).width() >= 768)

{

menuChange('disable');

responsiveflagMenu = false;

}

}

 

In the blocktopmenu.js file and uploaded it to the server.

After that i've emptyed the cache.

[JeredBolton]

Are you running some other caching module?

 

This file:

 

http://croford.com/themes/werkschoenennodig/js/modules/blocktopmenu/js/blocktopmenu.js

 

is still using $(document).width().

[jrgrafisk]

Did you solve this issue? I have the same problem i think

[pavel]

Hello,

I have problem - module Top Horizontal Menu doesn't work well on mobile device. Please can you help me? Thank you very much.
link: http://nevrlka.cz/

[jrgrafisk]

Hi Pavel

I found that it was a third party live chat plugin that caused my problems. 

Try disabling third party plugins - it might be one of them...

[cs4u]

My friends.... I have the same problem.... the TOP horizontal menu, NOT working only in mobile...

can anyone help ?

and one more problem.... 

in tm megamenu in mobile, when you click on ^ or down, show the subcategories (submenu) and HIDE in 1 sec... :((((

 

I have two this problems in my mobile site... can anyone help me?

my site url is : http://msreklama.gr

Thanks !!!

[pavel]

On 18. 1. 2018 at 10:29 AM, jrgrafisk said:

Hi Pavel

I found that it was a third party live chat plugin that caused my problems. 

Try disabling third party plugins - it might be one of them...

 

It did not help.

[pavel]

I still have the same problem on mobile device:

Next problem is when I open web in ipad. After click on button menu, not happen (the menu does not open ). I tried it on computer, menu not working when page width is 768 - 970.

Please help.