[Resolved] GeneratePress & NOO Menu – Conflict on mobile devices

[Jonathan L.]

I’m using your GeneratePress theme, as well as all the Addons.

I’ve recently installed a plugin called “NOO Menu” which allows be to create large drop down menus for my website. It works great, except on mobile devices. For some reason GeneratePress and NOO Menu seem to be playing king of the hill and neither will display correctly. Meaning… the toggle icons show up but won’t display anything.

I recently read your article entitled “Reply To: Layout Distortion”. http://www.generatepress.com/forums/reply/8860/
Thinking it might help stop GeneratePress and NOO Menu from conflicting, I downloaded the Empty GeneratePress child theme and added “define(‘GENERATE_DISABLE_MOBILE’, true);” to it. This not only disabled the mobile option for GeneratePress, but also for the NOO Menu Plugin.

The full desktop mode isn’t that bad. The only problem is that mobile devices don’t support :hover, and I can’t seem to use any other Responsive Menu plugins while everything’s disabled.

Do you have any suggestions for me? Can I disable GeneratePress’ mobile theme without disabling all other mobile themes? What can I do to get past this?

[Tom]

Hi there,

Using GENERATE_DISABLE_MOBILE shouldn’t disable any other mobile functionality – so that’s surprising.

Do you possibly have a link for the site where this is happening so I can see what the behavior is like?

Let me know 🙂

[Jonathan L.]

Thanks for getting back to me! Here’s my website address: http://beatthelearningcurve.com

[Jonathan L.]

So… if I put # in as the URL of my parent links, it does pull down the sub menu on a mobile phone. (Full Desktop Mode)

I guess my only question would be… why is the GENERATE_DISABLE_MOBILE disabling other responsive menus I try to implement?

[Tom]

I’m not quite sure.

This is the function called with GENERATE_DISABLE_MOBILE:

add_action( 'wp_enqueue_scripts', 'generate_dequeue_mobile_scripts', 100 );
function generate_dequeue_mobile_scripts() {

	if ( !defined( 'GENERATE_DISABLE_MOBILE' ) )
		return;
		
	$generate_settings = wp_parse_args( 
		get_option( 'generate_settings', array() ), 
		generate_get_defaults() 
	);

	// Remove mobile stylesheets and scripts
	wp_dequeue_style( 'generate-mobile-style' );
	wp_dequeue_style( 'generate-style-grid' );
	wp_dequeue_script( 'generate-navigation' );
	
	// Add in mobile grid (no min-width)
	wp_enqueue_style( 'generate-style-mobile-grid', get_template_directory_uri() . '/css/mobile-structure.css', false, GENERATE_VERSION, 'all' );
  
   // Add necessary styles to kill mobile resposive features
	$styles = 'body .grid-container {width:' . $generate_settings['container_width'] . 'px;max-width:' . $generate_settings['container_width'] . 'px}';
	$styles .= '.menu-toggle {display:none;}';
	wp_add_inline_style( 'generate-style', $styles );
}

As you can see, it just removes mobile-specific features from GP itself – nothing else.

I’m confused though, you don’t want the site to be mobile responsive, but you want a mobile menu?

Let me know 🙂

[Jonathan L.]

Tom,

Thanks for being patient with me and I’m sorry for all the confusion. What I want is for my responsive menu to work properly.

The only reason I went the full desktop route was because the responsive menu seems to be broken when the NOO Menu is installed. Even if I set (NOO Menu’s) mobile option to OFF.

I just undid the “GENERATE_DISABLE_MOBILE” change so if you look now (on a mobile device) you should see the problem I’m experiencing. http://beatthelearningcurve.com

[Tom]

Hmm, ok.

So what I’m seeing:

Your navigation plugin is replacing GP’s standard menu element with its own navigation element.

Can you turn on the mobile functionality of your plugin now, so I can see what is causing the issue and hopefully give you some code to fix it?

Out of curiosity, have you tried UberMenu? I know of others who are using it successfully with GP.

Let me know 🙂

[Jonathan L.]

Okay. NOO Menu gives me multiple options. It was set to “Do Nothing”. I just changed it now to “Collapse no Toggle Button”.

If I use the other options “Collapse with Toggle Button” it will show 2 different menu bars with their own toggle icons. Let me know if you need to see this option.

Uber Menu sounds familiar but I probably tried a free version. NOO Menu is a paid plugin with a variety of features that I liked. I could always give it a shot though if this doesn’t work out…

[Tom]

So how are you supposed to open the menu without a toggle button?

What happens with a toggle button? I can probably give you some CSS that will work if the toggle button is viewable.

Let me know – we’ll figure it out 🙂

Tom

[Jonathan L.]

I think it’s supposed to use the main themes toggle button… an option to deal with conflicting menus, or something…

I went ahead and enabled “Collapse with Toggle Button”. See what you think.

[Tom]

Hmm, I hate to say it, but I’m stumped.. Usually I can figure out some kind of workaround.

When clicking the new toggle, I get this error in my debug console:

SecurityError: The operation is insecure.
http://beatthelearningcurve.com/wp-content/plugins/mp-stacks/includes/js/elementQuery.min.js?ver=4.0
Line 2

Then nothing happens – no toggle at all.

I’m out of office tonight, but will be back tomorrow evening to help you further.

[Jonathan L.]

Any more ideas on this?

If noticed that if you touch the top menu first, and then touch the bottom menu, it expands. Maybe that will help with the trouble shooting…

[Tom]

Can you possibly email me login details so I can play around?

Thanks!

[Author]

Posts