I suspect I have a JS issue with mobile menu

Greetings, I am having some issues with my mobile menus on fallsbaptist.org and I am not sure what’s going on. For some reason, my mobile menu is defaulting to the expanded view and the hamburger button does not collapse it at all.

Hi There,

It seems you’ve overrided the _nav-primary.php file by using the child theme.

Please compare and update it to the latest version:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
	
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
	ubermenu( $config_id, array( 'theme_location' => 'primary') ); 
 else: ?>
 
<a href="#" id="x-btn-navbar" class="x-btn-navbar collapsed" data-x-toggle="collapse-b" data-x-toggleable="x-nav-wrap-mobile" aria-selected="false" aria-expanded="false" aria-controls="x-widgetbar">
  <i class="x-icon-bars" data-x-icon="&#xf0c9;"></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>

<div id="x-nav-wrap-mobile" class="x-nav-wrap mobile x-collapsed" data-x-toggleable="x-nav-wrap-mobile" data-x-toggle-collapse="1" aria-hidden="true" aria-labelledby="x-btn-navbar">
  <?php x_output_primary_navigation(); ?>
</div>

<?php endif; ?>

Regards!

I could be wrong, but did X change the way they handle primary and mobile menus? It seems that my mobile menu is being ignored by your code and the primary menu is being used in mobile view regardless of my settings.

Hey @bobbybosler,

The Primary menu still is and has been the one X uses in the navigation. Would you mind providing more details about your setup and also give us WP admin access in a Secure Note.

Thanks.

It seems that my submenus are not displaying properly. All options other than top level do not display. I do have some custom JS regarding the menu, but it does the same whether I remove it or not. I added info via the secure note.

Hi @bobbybosler

This issue is related to the child theme codes added, because this is how I can see your mobile menu on mobile devices using the parent theme:

I suggest removing every snippet added to your child theme files that is related to mobile menu one by one to figure out which one is causing this issue.

Thanks.

Fixed it. When I built the site two years ago, I added a mobile menu to the child theme in addition to the primary. When a recent update came out, apparently it changed the way JS handled the mobile menu, which broke its functionality. It’s all good now.

Glad to hear you got it sorted.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.