Mobile menu - permanently uncollapsed

Hi Themeco team,

Since I updated my theme - on mobile my site nav bar is automatically expanded > https://www.screencast.com/t/tYsbAcn11jP

How would i correct this?

This page is also highlighted by Google as being not-mobile friendly > https://www.screencast.com/t/FPUWi6TGFa

I imagine this may be because of the menu issue?

Hi There,

Can you please check this following points.

  1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.
  2. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  3. Remove custom CSS, Javascript and templates.

In case the issue persists, would you mind providing us with login credentials so we can take a closer look? Please provide following information:
Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
  • FTP credentials
    All the best!

The only changes I’ve made which have caused this to occour;

  1. Updated my theme
  2. Updated cornerstone

Can you help?

Hi There,

It seems you overrided the navbar template by used the child theme. Please compare and update the _nav-primary.php file to 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-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; ?>

  1. If you’re using a CDN(ex: CloudFlare), please clear the CDN’s cache and disable optimization services. For the CloudFlare you also need to follow the steps below besides the developer mode: https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/1

Let us know how it goes!

Hi Thai,

That’s a great help - thankyou. The new nav bar code has worked - however on mobile the nav bar menu is now not viewable or accessible.

I remember now - a while back this was the case after an update and i was given code to fix this. The code we’ve just replaced.

Can you help fix both issues with one code?

Also I’ve followed your instructions for the mobile-friendly fix, however there’s still no change. It also seems to just be with this particular page.

I wanted to check my cornerstone path as they mention it could be different - how do I find this?

Thanks,

Cheryl

Hi Cheryl,

Please keep a backup and then remove the _nav-primary.php file on your child theme (to let the one on parent X take place) see if that resolves the issue if it does then we know that the issue is caused by that modified _nav-primary.php, if so, please clarify what you’re trying to do on the navbar with that modification, so we can think a better resolution for it.

Remember to clear all caches

Thanks,

Hi Friech,

So when i delete this file - the menu returns to the mobile version, however, when i view on different size pages on a computer - the nav bar now completely disappears if the page has no room to view the full nav bar, see here > https://www.screencast.com/t/caZdwrYgIei

I imagine the code which has been there previously is allowing the nav bar to collapse with different widths?

I’ve restored the old code for now, so users can use my website over the weekend.

Please can you suggest a solution?

Cheryl

Hi @Cherylwoodman,

May I know what customization your _nav-primary.php has? Please provide the entire code of that file. Maybe it’s incompatible with the latest codes from the theme.

Thanks!

Hi Rad,

Sure thing - this is the code I was given > https://www.screencast.com/t/OUxwsQ8DqU

Can’t figure out how to leave this in a box.

Hi @Cherylwoodman

There is no customization on that file, I’m not sure what purpose of adding that in your older theme. It’s only recommended to remove that file since there is no customization and to let the system use the latest file. And it has no connection to the mobile menu issue.

For now, please remove that file and I’ll continue troubleshooting the mobile menu issue (not being visible). It could be just styling related or another. But I can’t confirm it since it’s mixed together with older navbar codes (from that file).

And as requested, please provide your admin login credentials and FTP login credentials in a secure note so we could troubleshoot the menu directly. Else, I can’t continue the investigation.

Thanks!

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