Mobile page dropdown menu not working

[skylabteam]

Hi, there are some issues while designing my website using ThemeCo’s X Theme.

My mobile webpage’s dropdown menu does not work and I am at a lost on how to rectify this. Please kindly provide me some advice on how to fix this issue. Here is my site for reference, www.skylabteam.com

Thanks

[jade]

Hi there,

There seems to be a JS error that is causing the issue:

Is your site under CloudFlare? if it is, please log in to your CloudFlare dashboard and “Purge All” your cache.

How do I purge my cache?

And if you don’t mind please put it on Development Mode to make sure none of the CloudFlare feature is causing the issue, but importantly “Purge All” the cache.

Also, turn off the Cloudflare Rocket Loader feature.

Let us know how it goes.

[skylabteam]

Hi Jade

Just tried what you mentioned but its still not working. Please do check my site again and see what other rectifications can we do.

Thanks

[rad]

Hi Jasper,

I can still see the same error and the same cache. And based on it, it’s CloudFlare rocket loader related (rocket-loader.min.js). Which I also verified by the header response of your site.

Could you try updating your theme and cornerstone, you already updated your Wordpress to 5.0.3 and the theme or plugin that remains old has a conflict with it.

Then make sure to disable your CloudFlare rocket loader.https://support.cloudflare.com/hc/en-us/articles/200168056-What-does-Rocket-Loader-do-

Then clear the server cache, CloudFlare cache, and your browser cache before testing it again.

Thanks!

[skylabteam]

Hi Jade

I have updated Cornerstone plugin and it works now. However currently, the sub menu is constantly displayed instead of being hidden until the button is pressed. Can you check on that as well?

Thanks

[thai]

Hi Jasper,

It seems the _nav-primary.php file which you copied to the child theme is outdated.

Please compare with the latest version then update your file in child theme:

<?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-expanded="false" aria-controls="x-nav-wrap-mobile" role="button">
  <i class="x-icon-bars" data-x-icon-s="&#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