Mobile Theme Post Order

Could you go to Appearance > Edit CSS in your dashboard, and let me know what the options are, on the right of the editor?

Thanks!

It shows these:

Preprocessor: None
Mode: Add-on
Mobile-compatible: Yes
Media Width: Default

If you were looking at the page a while back, I had the mobile theme disabled for a bit. It’s back on with it’s normal setting now!

Thanks.

At this point, there is only one thing I think we didn’t try. Could you switch to one of the default themes, like Twenty fifteen, for a few minutes, and let me know if the problem remains?

Thanks!

Tried Twenty fifteen as suggested, re-applied the customizations and it’s still the same problem.

I’m at a loss for ideas as well to be honest!

So let’s summarize:

• it’s not your theme
• it’s not your plugins,
• it’s not cache,
• I can’t reproduce on my end on test sites.

A quick work-around would be to add your Custom CSS to a plugin. That would solve your styling issues right away:

// Modify the main query on the home page for the mobile theme.
function jetpackme_custom_mobile_css() {
    if ( harry_lime_is_mobile() ) {
        wp_register_style( 'jetpackme-mobile-css', plugins_url( 'custom.css', __FILE__ ) );
		wp_enqueue_style( 'jetpackme-mobile-css' );
    }
}
add_action( 'wp_enqueue_scripts', 'jetpackme_custom_mobile_css' );

And then add your CSS to a custom.css file in your plugin. Here is a plugin with all the code we’ve mentioned in that thread so far:

https://i.wpne.ws/fW9b

However, that doesn’t explain why things are failing on your site. I’m running out of ideas at this point. Can you think of any other customization on your site, that you haven’t tried to remove yet?

Thanks!

Looks like we’re getting somewhere.

I applied the new plugin code to the site and everything now seems to be working as it should on the test site. I just needed to add “!important” tags to some of the css lines.

I’ve applied the same plugin and settings to the actual site and again everything’s as it should be except the “Menu Toggle” has now gone missing on the homepage.

The only way to bring it back is to remove the code below from the plugin:

/**
 * Modify the main query on the home page for the mobile theme.
 */
function firebar_modify_main_query( $query ) {
	if ( firebar_is_mobile() && is_home() ) {
		$query->set( 'orderby',  'meta_value' );
		$query->set( 'meta_key', '_expiration-date' );
		$query->set( 'order',    'ASC' );
		return;
	}
}
add_action( 'pre_get_posts', 'firebar_modify_main_query' );

Again, this only applies to the homepage. The Menu Toggle can be seen on other pages. The script says that “display:none” is being added for some reason.

<h3 class="menu-toggle" style="display: none;">Menu</h3>

Here’s that page: https://www.firebar.lv/

The script says that “display:none” is being added for some reason.

The menu is indeed hidden when the menu is missing or empty. Could you try following the instructions here:
https://jetpack.com/support/mobile-theme/#custom-menus

Let me know if it helps.

Yes, exactly!

So I added a custom menu and pointed to it from the plugins function list. It’s showing the new menu correctly on inner pages but still not on the front page.

p.s. I promise I’m not finding these problems on purpose! ??

The Mobile Theme doesn’t seem to be enabled on the site anymore. Could you activate it again, and make sure all cache is flushed on your site?

Once you’ve done so, if you still experience issues, I’m afraid I can only recommend that you go through each plugin and deactivate them again, one at a time, as we’ve done earlier, to make sure that’s not caused by a plugin.

Let me know how it goes.

Yes, I’ve been working on a responsive theme as a fall back if we can’t fix this.

Actually, now I have re-activated, everything appears to be working correctly. And I think I may have found the issue on the other site and will check everything there in the coming days.

Hopefully, we can consider this solved now.

Can’t thank you enough for the time you’ve put into this!

Cheers Marcus