How to stop mobile theme inheriting desktop navigation menu?

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