- This topic has 20 replies, 7 voices, and was last updated 12 years, 5 months ago by
.
-
Posts
-
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.
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.
Need help with customization or troubleshooting? Reach out to me.
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
http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703I 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.
UberMenu looks pretty amazing. Please let us know if it works with your theme.
WordPress, Shopware and Magento E-Commerce
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:
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
http://beaphotoninja.com/testsiteHope its a help - still working on it
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.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.)
I put a responsive menu in the Agency theme using this technique and minor modifications :
http://blackhillswebworks.com/2013/08/16/how-to-add-a-mobile-responsive-menu-to-your-genesis-wordpress-website/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.
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.
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?
—LEeOlivier, 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?
lbdesign,
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.
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉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).
ok great. Let me give this a try. Been dieing to find a way to easily make Menu's not only responsive but "responsible" for mobile users.
@John, how did you get the slider to display the full width in Metro. Nice.Mealtog,
Here's a tutorial I wrote last month on how to do that: How to add a Soliloquy slider to a Genesis page template file
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉Hey John, that is awesome. Thanks for sharing that. It will work perfectly for one project.
Also, I tested the Responsive Menu and ran into a few things. Could not fix it so had to remove it. Because I don't have a header logo and I just display long text, the Menu button ate into that. I think I have to modify CSS but did not have a chance to figure it out. Then I added a logo and the Menu button behaved much better. Except sometimes, it would not show and disappear properly (on the fly) when I resize the browser to do testing. I think it full width slider looks great. My only concern is the ratio and size of the image. I would need to make sure all upload photos will meet the minimum size requirement and take take photos with the crop ratio in mind. But very cool indeed.
I am still trying to figure out a way to better manage Menus for Genesis in a mobile environment. I have seen Facebook mobile type Menu's where it's an entire new page (swiped to the left), a Footer Menu like yours or just a simple dropdown Hamburger menu. I actually wish SP would have built this in the Pro themes since mobile is so important these days.
John, your mobile menu solution is truly elegant. Maybe you can change the button that appears in the upper right corner into a full-width button/bar that sits between the header logo and the page content? (leaving the rest of it just the way it is)
lbdesign,
That's part of the beauty of this mobile menu solution - the CSS can be reworked to fit any site and/or design preferences.
From what I've seen while using my phone to access the web, buttons or icons, usually in the upper right corner, are the norm for menus on mobile websites, and someone who uses their phone for surfing the web is going to be accustomed to that method. Screen real estate is a premium on mobile, and I would prefer not to take up space with a bar when a small button works just as well, and I can also shrink the logo and move it up into the other corner, conveniently out of the way.
If you use it and try the full-width bar approach, let me know so I can check it out.
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉
- The forum ‘General Discussion’ is closed to new topics and replies.