WP SITES

Log in

Genesis Mobile Responsive Nav Menu

—

by

Brad Dalton

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

Comments

19 responses to “Genesis Mobile Responsive Nav Menu”

  1. Edward Labuschagne Avatar
    Edward Labuschagne

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Edward Labuschagne Avatar
        Edward Labuschagne

        ah ok, thanks very much.

  2. spnfxdan Avatar
    spnfxdan

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      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/

      1. spnfxdan Avatar
        spnfxdan

        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!

        1. Brad Dalton Avatar
          Brad Dalton

          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.

  3. philr Avatar
    philr

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

    1. Brad Dalton Avatar
      Brad Dalton

      There’s 2 methods included in this post.

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

  4. Rachel aka RC Vane Avatar
    Rachel aka RC Vane

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      You’re welcome Rachel.

  5. Lynne Avatar
    Lynne

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      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?

  6. Keith Davis Avatar
    Keith Davis

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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

    2. Brad Dalton Avatar
      Brad Dalton

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

  7. trista Avatar
    trista

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Trista

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

      sub menu mobile

    2. Brad Dalton Avatar
      Brad Dalton

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

      drop down

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.