How to stop mobile theme inheriting desktop navigation menu?

by

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?

5 s
5

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

Leave a Comment