The code in this tutorial not only makes any genesis navigation menu mobile responsive, it also adds responsive sub menu indicators using Dashicons.
There’s 3 simple steps you need to follow:
- Register and load dashicons and the responsive javascript file in your child themes functions.php file.
- Create a new .js file in your child themes root directory named responsive-menu.js and paste in the Javascript from the Gist labelled responsive-menu.js
- Add 2 small blocks of CSS to the end of your style.css file before the start of the Media Queries and add a large block of CSS to the Media Queries.
Accessable Responsive Menu
This post includes the code for both the old and new responsive menus.
Youtube Video Guide
Click here to watch the installation instructions on YouTube.
Here’s the step by step installation instructions & code for both the old non accessable mobile menu and the new accessable responsive menu.
I want to use this menu to replace my current menu (see here: https://inthebunch.co.za)
It’s a pretty crappy responsive menu currently. How can I implement the menu in this tutorial to replace mine but have it in the same position as the current one?
Change themes. The code in this post was published on Aug 8, 2014. Any of the latest HTML 5 child themes will include the latest menu including the Genesis Sample theme.
ah ok, thanks very much.
Hi Brad,
What edits do I need to make & where to have the “Menu” text appear next to the hamburger with the new accessible menu? (Specifically: Interior Pro)
Thanks!
Hi Dan
Please link to the site because when i load a fresh copy of Interior Pro locally, there’s no “Menu” text. Nor is there in the demo http://demo.studiopress.com/interior/
Hi Brad,
Sorry, could have been clearer – I want to add the “menu” text – it’s not there now.
(Does appear in the new release Sample theme though http://demo.studiopress.com/genesis-sample/)
Site build is local, sorry!
Thanks!
Dan
You could take the jQuery from Genesis Sample and load that in replace of the default responsive-menu.js file. I tested this and it works.
Hi Brad
Is this still the best way to get responsive menu?
Can it be done without js?
There’s 2 methods included in this post.
Yes can be done without js but these are the 2 best methods in my opinion.
Hey Brad,
Just wanted to say thank you – this really helped me! Only thing I did different was to leave out the menu repositioning because I wanted the site title and description above the menu. Super easy to implement.
Thank you!
You’re welcome Rachel.
Well that must be extremely recent because, I just downloaded a week or so ago the Genesis sample theme and had to build my own Responsive menu hamburger menu. There was no js and the media queries for 768px width didn’t exist. It would have saved me a considerable amount of time as you can imagine.
Hello Lynne
Yes. This is the best code for creating responsive menus in Genesis in my opinion.
I gather it would have taken some time and effort to hand code a hamburger style menu like this?
Hi Brad
A biot of a gem this one.
Appreciate the time and effort you put into sharing these awesome tutorials.
Hi Keith
Yes. Been waiting for something like this for some time.
Always getting value lots of value from the Pro Plus package which is why i recommend it to web designers and anyone who wants to build their own custom themes on Genesis.
Forgot to ask Keith, what do you think of the Demo link i added at the end of the post?? hahaha.
Hi, do you have a screenshot of a site that you have this on now? I see your screenshot above, however, I’m not sure how the submenu looks. My site has submenus right now and you can’t see them on the mobile.
Hello Trista
Here’s a look at the sub menus. One is expanded by clicking the arrow.
Also check out the demo link which gives you a live play around.