Sridhar Katakam

Genesis and WordPress Tutorials

Mobile Responsive Genesis Header Nav

by 13 Comments

Gary Jones authored a plugin called Genesis Header Nav for Genesis that registers a menu location and displays it inside the header. The benefit of using this plugin over the built-in Header Right widget area is that when the requirement is to display a custom menu in header's right side, Genesis Header Nav plugin does it with lesser HTML markup.

In this article I show how Genesis Header Nav can be used to display a custom menu in the right side of Header in a Genesis site including the necessary CSS (taken from Beautiful Pro) to make this nav mobile responsive.

Screenshots:

Screen Shot 2014-10-07 at 6.06.26 pm

Screen Shot 2014-10-07 at 6.07.30 pm

Screen Shot 2014-10-07 at 6.16.03 pm

Screencast:

Step 1

Download Genesis Header Nav's zip file from here, install and activate it.

Step 2

Go to Appearance > Menus > Manage Locations and set your desired menu in "Header" Theme Location.

Screen Shot 2014-10-07 at 6.36.34 pm

[Optional] Step 3

If you do not wish to use 'Header Right' widget built into Genesis, add this in functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi,

    Is this tutorial working with last version of genesis and worpdress 4.2.1 as I have implemented it as explained and the menu is not responsive, nothing happens.
    I’m trying to find one responsive menu method for the header and could not find any, I’ve try already 5 or 6 tutorials and none is working.
    Thanks a lot 🙂

    Reply

      • I’m using genesis-sample child theme. For the url, it’s a test server so I don’t want to let the address visible here, could I sent it to you by PM? If yes, how?
        Thanks 🙂

        Reply

          • Thanks Sridhar for your help by email, it is now working 🙂
            A last question, my menu is three level depth, is there a way through customization of the .js file to have the second depth level to be “openable/closable”? As actually, you can open the first level but then all the levels below are all open…I’m pretty sure their is something to do with this code but don’t know how:

            $(".responsive-menu > .menu-item").click(function(event){
            if (event.target !== this)
            return;
            $(this).find(".sub-menu:first").slideToggle(function() {
            $(this).parent().toggleClass("menu-open");
            });
            });

            I’ve tried this:

            $(".responsive-menu >.sub-menu > .menu-item").click(function(event){
            if (event.target !== this)
            return;
            $(this).find(".sub-menu:first").slideToggle(function() {
            $(this).parent().toggleClass("menu-open");
            });
            });

            but without success. Any idea ?

  • Hi Sridhar,

    I’m hoping you can help me out with something. I have everything setup to include the mobile navigation on my site and it’s working perfect, the only problem I have is the WooCommerce cart items in the top right is also a “menu” so is picking up the same settings on mobile devices. I would like to have only the actual navigation responsive but not sure what to change to make that happen.

    Any advice you could give would be greatly appreciated.

    Caley

    Reply

  • So this plugin won’t activate for me. I get a result along the lines of:

    Parse error: syntax error, unexpected T_STRING in ../public_html/wp-content/plugins/genesis-header-nav-develop/genesis-header-nav.php on line 28

    Am I doing something wrong here in terms of the upload? Wrote to Gary just now, but you might have an idea…

    Reply

  • When I add the code to the functions.php file, it breaks the site. I’m currently working on a locally hosted project so can’t send a link or anything, but any suggestions as to what’s going on?

    Reply
    • >