How to stop mobile theme inheriting desktop navigation menu?

Question

UPDATE************ Well I have a working solution, although not ideal.

Using the Genesis sandbox child theme which has a mobile nav button built-in, I was able to set that to use the primary nav menu, so that takes care of minimised desktops.

I then added the responsive menu plugin which allowed me to choose my custom mobile menu for the source. Then I hid the plugin for desktop use, and hid the Genesis menu button for mobiles.

Will leave it a few days and then choose who gets the 50 points - thanks to all for your contributions...

---

(QUESTION RE-PHRASED) Trying to build a mobile version of my site.

2 themes, 1 for desktop and another just for mobile visitors (mobile theme selected automatically for mobile visitors with "any mobile theme plugin").

I have created a custom menu for each theme in wp admin / menus - desktop menu and mobile menu.

With the desktop theme activated I select the desktop menu for the primary navigation. With the mobile theme activated I set the primary navigation to mobile menu.

The problem is that I have to have the desktop theme active for normal operation. Mobile visitors do see the alternative mobile theme, but the navigation always follows whatever the desktop primary navigation is set to.

How can I stop this happening and force the mobile theme to always/only use the mobile navigation?

Answer 1

I do think that the days of creating a separate theme for mobile users are long gone. With proper planning and layout you can use one theme on desktops, laptops, tablets and mobile devices

I would tackle this is a much different way.

• Firstly, I would create my theme in such a way it is responsive on according to the required screensize like normal. For examples see the bundled themes, specially as from twentytwelve

• Use the wp_is_mobile() conditinal tag to load functions that will only be specific to mobile phones. I would also create a separte functions file just for my mobile functions to keep them organised. Example

  if(wp_is_mobile()) {
     //DO SOMETHING FOR MOBILE
  }else{
    //DO SOMETHING FOR EVERYTHING ELSE NOT MOBILE
  }
  

• Create a spearate stylesheet just for your mobile styles, then enqueue this stylesheet conditionally using the wp_is_mobile() conditional tag. Just remember to add priority to your action so that whenever this stylesheet load, it loads dead last.

For the menu, I would also look at the bundled themes. I like the twentyfourteen menu and how it respond. All is handled by simple js from inside functions.js. You can make use of this and adapt it in your own theme. I have never worked with genesis, so I don't know what hooks ets they are using.

Also a great idea comes from this tutorial from wpmudev.org, which basically incorporates the Alberto Valero’s Sidr plugin for jQuery. I've used it in one of my twentyfourteen child themes, and it works great.

These are just a few alternatives you can consider. I hope some of this helps in solving your problem

Answer 2

Create 2 menus. One for display on mobiles and one as a default for desktops. Add this code in your header.php or you could use a hook in your functions file.

<?php
if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'theme_location' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'theme_location' => 'desktop-menu' ) );
}
?>

Or you could create 2 custom menus and use this code:

<?php
if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'menu' => 'desktop-menu' ) );
}
?>

Or you could switch themes conditionally:

add_filter( 'stylesheet', 'wpsites_change_themes' );
add_filter( 'template',   'wpsites_change_themes' );

function wpsites_change_themes( $theme ) {
    if ( wp_is_mobile() ) 
        $theme = 'my-mobile-theme';
    return $theme;
}

Answer 3

After 5 days of googling, trial and error and umpteen plugins, I finally have a solution that works for me.

I've gone back to using a common theme for both desktop and mobile visitors, but each with their own custom menu. This was made easier for me because I'm experimenting with the Genesis framework and their "Sandbox" childtheme has a minimised / mobile navigation function built in. So I simply set the primary and mobile options to the desktop-menu.

To cater for mobile visitors, I installed the excellent "responsive menu" plugin: https://wordpress.org/plugins/responsive-menu/ This gives you the option to select a different custom menu for its source, so I set this to my mobile-menu.

Adding the responsive plugin means I ended up with 2 navigation menus showing, so I used a bit of conditional CSS to hide the responsive menu on the desktop and hide the Genesis menu for mobiles.

<?php if (wp_is_mobile() ): ?>
<style type="text/css">
.desktop-nav{display: none;}
#click-menu{display:block;}
</style>
<?php endif; ?>

Click menu is the div for the responsive menu. The "wp_is_mobile" function can be more accurately targeted by installing the mobble plugin if required.

I even added a page redirect for mobile visitors which takes them to my edited-down version of the home page:

function so16165211_mobile_home_redirect(){
if( wp_is_mobile() && is_front_page() ){
   wp_redirect( '/mobile-home' ); 
    exit;
    }
}
add_action( 'template_redirect', 'so16165211_mobile_home_redirect' );

So there you have it! It's an acceptable solution for me just now. Ideally I'd be able to offer mobile visitors the option to choose the mobile or desktop experience, but that seems to involve setting cookies which may well be a question for another day.

Thanks again to ALL who took the time to respond - especially those who suggested that having 2 different themes wasn't the best approach.

Answer 4

Its quite odd to have two themes running like you describe, but I think we can figure this out.

In both themes, wherever your menu is printed (probably header.php) you'll need some code like this that chooses the correct menu, then prints it:

$desktop_theme_name = 'Desktop Theme Name'; // Replace this with the name of the desktop theme
$mobile_theme_name = 'Mobile Theme Name'; // Replace this with the name of the mobile theme

// Get the current theme's information
$current_theme = wp_get_theme();

if ( $current_theme->Name == $desktop_theme_name ) {

    // Print desktop menu
    // NOTE: Instead of using "theme_location" use "menu"

    wp_nav_menu( array(
        'menu' => 'Desktop Menu', // Replace this with the name, slug, or ID of your desktop menu
        // Rest of menu options if needed
    ) );

} else if ( $current_theme->Name == $mobile_theme_name ) {

    // Print mobile menu

    wp_nav_menu( array(
        'menu' => 'Mobile Menu', // Replace this with the name, slug, or ID of your mobile menu
        // Rest of menu options if needed
    ) );

} else {

    // Not using one of the special themes, so just print the menu!

    wp_nav_menu();

}

Hope that helps, good luck!

Answer 5

0 down vote If anyone is still watching this thread, I had been struggling with this for a while, none of these worked... I could do it with CSS!

Basically, create one giant menu with all the items you want on mobile and desktop. Then, add classes: "hide-mobile" and "hide-desktop" on their respective menu items.

Use this CSS:

@media (min-width: 980px){ .hide-desktop{ display: none !important; } } @media (max-width: 980px){ .hide-mobile{ display: none !important; } }