August 13, 2013 at 1:34 am #55975
Has anyone ever tried to take the awesome responsive menu from the Genesis Sandbox theme and use it on an official Genesis theme? I’m currently making a site using the Metro theme, and disappointed to see the menus are not mobile-responsive. I’m using the plugin “Responsive Select Menu”:
… but the Sandbox menu is much better!
Is doing what I describe even feasible? Basically, I’m looking for any and all solutions for making *nice* mobile responsive menus that work in Metro.
thank you.August 13, 2013 at 7:30 am #56029
anitacParticipantPost count: 6991
Brad Potter has been coding some varying mobile responsive menus. Check out this one – http://bradpotter.com/create-a-responsive-mobile-menu-from-the-header-navigation-menu/. He has others over there too. Post back if one of these works for you.
August 13, 2013 at 2:37 pm #56151
Thank you! I will definitely try this and I’ll write back when I do.August 14, 2013 at 12:33 am #56240
I did his tutorial, which is beautifully presented and easy to follow. But it only partially worked in Metro. The menu collapsed into his mobile version, but the colors were messed up and the sub-menu items didn’t behave properly. His demo is built on straight Genesis 2, so maybe that’s the problem — that it needs modification on each child theme?
My next step is going to be trying some commercial plugins, even though they will add to load time. Like these:
http://codecanyon.net/item/kodda-responsive-wordpress-mega-menu-/4718440 responsive mega menus to test
I wrote studiopress and they said although they plan to revise Metro to make it better, it’s not first in the queue, and they can’t give any timing estimates.August 14, 2013 at 3:50 am #56250
NickParticipantPost count: 1
UberMenu looks pretty amazing. Please let us know if it works with your theme.
WordPress, Shopware and Magento E-CommerceAugust 14, 2013 at 10:10 pm #56454
Hmm, I found a Metro demo on Brad Potter’s site with his responsive menu, so I wonder what went wrong with my implementation of his demo… I may have to try it again:August 16, 2013 at 4:42 pm #56927
fotodog13ParticipantPost count: 50
I tried Brads on the agency theme and got it close but could not get it to look as good as the Sandbox menu- so
I downloaded the sandbox theme and compared that file with the one I had on my agency theme.
I have been able to get the sandbox menu working almost perfectly on my agency theme -
the only sticking point I have to figure out right now is the menus come in open- rather than closed on the mobile versions.
* They come in closed on the mobile versions on the sandbox theme menu.
FYI – so far this was not as difficult as I thought it was going to be- I am not a programmer by any means- no just enough to get by, and have had some great help from people in the forums here.
If you want to see the sandbox menu on the agency theme ( modified ) you can see what I am doing here
Hope its a help – still working on itAugust 17, 2013 at 2:42 am #57006
Very nice, fotodog13.
I am in touch with Brad in his tutorial comments, and he wants to be clear that the tutorial code is based on the Sample Theme for Genesis 2.0, and would need modification for any other theme, like the Metro that I’m using.October 30, 2013 at 12:19 pm #69949
I did install and use Uber Menu ($16 at codecanyon).
It is very well documented, with fast and good support. I was able to use the Uber configuration panel to customize the colors, fonts, height, width, borders, etc. without coding. If I had just gone with this from the beginning, I’d have saved a lot of time. I’d use it again.
You can see it in use on the main menu here:
You can only have one uber menu per page, so on the above example site where there are two menus, I am stuck with the upper secondary menu being the genesis Metro default menu.
I still want Studiopress to update all their themes with mobile-responsive menus, and am disappointed they are selling so many themes as “responsive” without this feature included. Once they update Metro with a real mobile-responsive menu, I’d certainly remove uber menu in favor of the built-in one, on the assumption it would require loading less code and therefore speed up the site a bit.
(Sorry for the delay responding to give you this update.)October 30, 2013 at 12:34 pm #69951
olivier.moreauParticipantPost count: 48
I put a responsive menu in the Agency theme using this technique and minor modifications :
You can see the result at http://groupe-css.com/home/
The interesting part about that technique is that the menu is automatically visible after scrolling down the home page on a smartphone. It’s als fairly easy to customize.October 30, 2013 at 12:40 pm #69953
fotodog13ParticipantPost count: 50
heres another site I did that has a mobile menu that works well. I agree the menus are nowhere near what people would expect to see for a mobile based site. While most of the themes being pushed can be considered responsive, I have yet to see any that studiopress has done, or upgraded to be ” responsive” that have attempted to even addressing the menu issue.October 30, 2013 at 5:59 pm #70022
fotodog13, that menu is great! It’s nicer for the user than my uber menu. Did you base it on a publicly available tutorial or add-on library, or did you make it by yourself?
—LEeOctober 30, 2013 at 6:03 pm #70024
Olivier, I like the way your menu looks when expanded. Do you find it odd that the menu turns from a bar to a button, and then the mobile menu appears at the bottom of the page? Are your web visitors OK with that?October 30, 2013 at 9:06 pm #70041
JohnParticipantPost count: 155
Here’s the result of that tutorial that Olivier mentioned on a Metro site: http://citychurch.bhwebworks.com/
Keep in mind that a visitor using a phone or small tablet isn’t going to see the menu turn “from a bar to a button,” since it’s always a button on their device.
October 30, 2013 at 11:28 pm #70055
Good point! And nice site. I’m just concerned that the button isn’t as obvious as a bar (people prefer interface elements they already are familiar with).
You must be logged in to reply to this topic.