Mobile menu won't open

[Youprinting]

Hi there,

Since the latest updates our mobile menu on www.grillo.nl stopped working. It won’t open anymore. I’ve already checked some other topics that are about non-working menu’s but none is talking about not opening. I’ve checked what I can but I can’t seem to figure out what’s the problem. Could you please see if you know why the menu isn’t working?

Thanks!

Best regards,

Delana Arnold

[christian]

Hey @Youprinting,

You have PHP code inside your custom JS. Please ensure you do not have syntax errors in your JS code because that could stop other scripts from functioning which is likely the cause for the mobile menu issue.

Thanks.

[Youprinting]

Unfortunately removing that line doesn’t do anything (don’t know why it was there anyways). Not getting any errors in my console anymore either but the menu still won’t open.

[thai]

Hi There,

I would like to check your website but the password is incorrect. Could you please double check?

It seems like you’ve overrided the navbar templates by using the child theme. Please compare and update those files to the latest version also:
_navbar.php

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

_nav-primary.php

<?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; ?>

Hope it helps

[thai]

Hi There,

Please find this code under _nav-primary.php file:

<?php wp_nav_menu( array( 'menu' => 'Mobile Menu' ) ); ?>

And change to this:

<?php wp_nav_menu( array( 'menu' => 'Mobile Menu', 'menu_class' => 'x-nav', 'container' => '' ) ); ?>

Let us know how it goes!

[Youprinting]

Hi there,

I’ve changed that line in all the _nav-primary.php files I could find in the child theme and even in the main theme (in both the legacy tree and the views) but none of it seems to work. I just don’t get why it won’t work anymore… It used to work for almost a year-and-a-half without any issues. Am I missing something here still?

[thai]

Hi There,

Please replace all the _nav-primary.php file with the following code:

<?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 wp_nav_menu( array( 'menu' => 'Mobile Menu', 'menu_class' => 'x-nav', 'container' => '' ) ); ?>
</div>

<?php endif; ?>

[Youprinting]

Awesome, it works now, thanks alot!

[Alaa]

You are welcome