Pluggins, reactive design, accordion and pulldown menus

Hello,

Here is the situation:

I’m creating a reactive theme and I’m having difficulty with the menu for my site. When the viewport reaches an iPhone sized screen (or smaller) I would really like the navigation menu to change from being a horizontal pulldown into being a vertical accordion. My horizontal menu is achieved through a plugin called “Uber Menu” by Code Canyon. The vertical menu is achieved through another plugin called “Jquery Vertical Accordion.” These two plugins do not play nicely together when each one is activated at the same time.

My questions:

Is there a way to use media queries to somehow resolve the conflict between these two plugins or disable one based upon viewport size? I was thinking that you might be able to leave both plugins enabled but somehow block one plugin’s CSS so that the blocked plugin is conflicting but the site user can’t tell because its CSS isn’t active until a viewport reaches a specific size. At that point you would switch around which plugin’s CSS is active and which one is blocked.

This is the best idea I can come up with but it feels a bit wonky to me.

There might be a WordPress plugin that actually handles this (wouldn’t surprise me) but I haven’t found it.

I would also be interested in hearing about other solutions to this issue. Again, the main problem is that horizontal drop downs are not useful at smaller screen sizes. Accordions would be much more appropriate. I’m just not sure how to switch between the two based on viewport size.

Thanks in advance for your help.