• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Genesis Mobile Responsive Nav Menu

The code in this tutorial not only makes any genesis navigation menu mobile responsive, it also adds responsive sub menu indicators using Dashicons.

responsive sub menu

There’s 3 simple steps you need to follow:

  1. Register and load dashicons and the responsive javascript file in your child themes functions.php file.
  2. 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
  3. 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.

responsive-drop-down-menu

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.

Register for full access

Related Tutorials

  • Add The Best Responsive Menu To Your Genesis Child Theme
  • Make Genesis Primary Nav Menu Responsive in Centric Pro

Nav Menu

Reader Interactions

Comments

  1. Edward Labuschagne says

    April 5, 2019 at 2:05 am

    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?

    Log in to Reply
    • Brad Dalton says

      April 5, 2019 at 2:07 am

      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.

      Log in to Reply
      • Edward Labuschagne says

        April 5, 2019 at 2:48 am

        ah ok, thanks very much.

        Log in to Reply
  2. spnfxdan says

    June 25, 2016 at 11:37 pm

    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!

    Log in to Reply
    • Brad Dalton says

      June 26, 2016 at 12:20 am

      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/

      Log in to Reply
      • spnfxdan says

        June 26, 2016 at 1:15 am

        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!

        Log in to Reply
        • Brad Dalton says

          June 26, 2016 at 5:57 am

          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.

          Log in to Reply
  3. philr says

    February 8, 2016 at 10:24 pm

    Hi Brad
    Is this still the best way to get responsive menu?
    Can it be done without js?

    Log in to Reply
    • Brad Dalton says

      February 8, 2016 at 11:28 pm

      There’s 2 methods included in this post.

      Yes can be done without js but these are the 2 best methods in my opinion.

      Log in to Reply
  4. Rachel aka RC Vane says

    September 12, 2014 at 5:33 pm

    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!

    Log in to Reply
    • Brad Dalton says

      September 12, 2014 at 6:03 pm

      You’re welcome Rachel.

      Log in to Reply
  5. Lynne says

    August 8, 2014 at 5:43 pm

    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.

    Log in to Reply
    • Brad Dalton says

      August 9, 2014 at 3:00 am

      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?

      Log in to Reply
  6. Keith Davis says

    August 8, 2014 at 5:27 pm

    Hi Brad
    A biot of a gem this one.
    Appreciate the time and effort you put into sharing these awesome tutorials.

    Log in to Reply
    • Brad Dalton says

      August 9, 2014 at 3:01 am

      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.

      Log in to Reply
    • Brad Dalton says

      August 9, 2014 at 5:01 am

      Forgot to ask Keith, what do you think of the Demo link i added at the end of the post?? hahaha.

      Log in to Reply
  7. trista says

    August 8, 2014 at 5:20 pm

    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.

    Log in to Reply
    • Brad Dalton says

      August 9, 2014 at 3:23 am

      Hello Trista

      Here’s a look at the sub menus. One is expanded by clicking the arrow.

      sub menu mobile

      Log in to Reply
    • Brad Dalton says

      August 9, 2014 at 5:02 am

      Also check out the demo link which gives you a live play around.

      drop down

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.