Dropdown Menus and Mobile Responsive Themes

[Michaelepsilis]

Hi, I am struggling with how to resolve what I see as a problem with responsive themes that use dropdown menus. I am trying to work with the Outreach theme (but I think the same applies to other themes).

It seems that many touch screens do not deal well with mouseover events so the dropdown menu system doesn't work reliably on these devices. So how can I deactivate the dropdown for these devices and replace them with a simple navigation list of visible items or a button that brings up a simple menu.

My first thought was I could do it with CSS but this doesn't switch off mouseover effect - so do I have to set up 2 separate menu systems?

[NicktheGeek]

There are a few ways to handle this. I am working up a custom solution you can view here.
http://fluid-two.designsbynickthegeek.com

Here is another solution
http://genesissandbox.com

[Michaelepsilis]

Nick - these are both nice solutions. Now how do I incorporate either of these into the outreach theme I am using? (Please bear in mind I am not a programmer but can make minor changes.)

Another solution that has occurred to me is to use the primary menu for the main dropdown, then use the secondary menu as a simple menu for small screens - switching them on and off with a css display setting. This seems like a neat solution as the same menu could be assigned to both primary and secondary so no worries about managing 2 menus. But I can't figure out how to switch off the dropdowns on the secondary menu.

[NicktheGeek]

Both solutions are custom and would require a good deal of programing. You might need to hire a developer to implement it.

[Michaelepsilis]

Nick, I can't help feeling that there is a big problem here with all genesis responsive themes if the header, primary and secondary navigation do not work reliably on touch screen devices if the menus have sub-menus. This is rather limiting and seems to defeat the object of using a responsive theme - which is a bit of a problem for me right now as I am working on 2 websites specifically including the ability to work on tablets and mobile phones. Is there a fix being considered for this that can be applied to all the themes?

[NicktheGeek]

Michael,

I can finally say something about it because Brian tweeted it last night. We are working up a solution for Genesis 1.9 that will include a mobile menu. This will require some customization for existing themes, but the Genesis core will have the ability to activate a mobile menu.