Mobile Menu Button Not Clickable

Are there any JavaScript errors in the browser’s developer console?

What’s the address of the site in question so we can take a look and try to figure out what may be happening behind the scenes? (NB: You won’t be able to remove any URLs you share later beyond the 60-minute editing window, so that’s a judgement call you need to make.)

Without seeing it, assuming you’ve enqueued your default navigation.js in functions.php, it comes that way from Underscores but it can always be changed..?.., it’s probably because you’ve altered the element classes and/or id’s responsible for the navigation.js to find the elements.

In cases like this, I like to open the html in dev tools, identify the elements that should open/close (the mobile nav) and then click the button to see if that element flashes, which would indicate that a class, or id, or any number of other attributes were changed with js. If nothing flashes, then the navigation.js is not able to identify the elements in the dom that it needs to perform it’s task.

Thanks for the feedback guys!

@gappiah , Can’t see any JS errors in the console. Nothing appears to be missing…

@visualeight , good point on functions.php. I haven’t KNOWINGLY changed anything (enqueque for main nav is still the same) but I HAVE added a secondary navbar and I’m wondering if that might have screwed things up a bit… ??

I’ll work further on the points that both of you have made.

If you added a second navbar with the same id’s and class names then that is your problem. I would highly recommend walking through navigation.js and understanding what it’s looking for, and also how it adds classes required for built-in functionality like .nav-menu, etc.

If you copied the entire <nav id=”site-navigation”> and did not change the id, then that is probably your culprit. But I would remove the 2nd navbar, see if that makes the original work, then add the second one in one step at a time and each time test to see what step is causing the original navbar to break.

Thanks for your comments @visualeight. This is a copy of the code in my header.php file.

wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
This is my code for the secondary menu…
wp_nav_menu(
array(
'theme_location' => 'menu-2',
'container_class' => 'secondary-menu' )
);

Don’t think I have duplicate IDs or classes here?

Removed the second navbar but the problem is persisting??

• This reply was modified 1 year, 6 months ago by mikehenden.
• This reply was modified 1 year, 6 months ago by mikehenden.

Can you include the code for your <header> or <nav>, wherever you have the menu code that is not working?

Based on what you have in your functions.php for the navigation menus, those look ok. However, your root problem was the mobile menu was not toggling on/off when you clicked the button. If any of the classes or ID’s that navigation.js relies upon are changed, or embedded incorrectly, then it will cause it to not work.

• This reply was modified 1 year, 6 months ago by traveler.

Hi @visualeight, happy to report that yesterday I was able to reverse-engineer the code and finally eliminate whatever was causing the problem (still don’t know what sneaked in there but it’s gone now). All that remains is to introduce my SECONDARY menu (which is just above main navigation) and hope it doesn’t break anything. And (more to the point) it might even handle second-level navigation as it is apparently supposed to (although I won’t hold my breath on that one…)

So the fist of my two navigation issues is resolved : )

Thanks for your support!