WP SITES

Log in

Add Extra Nav Menu In Genesis Footer With Responsive Menu Icon

—

by

Brad Dalton

This code enables you to add a 3rd nav menu in your themes footer.

3rd-menu

All you need to do is copy and paste the PHP code at the end of your child themes functions file and the CSS to the end of your child themes style.css file.

Here’s how the new nav menu looks in the Executive Pro child theme by StudioPress:

full-width

If you decide you also want a responsive menu icon for your footer menu, here’s how it looks on a smaller screen:

responsive

The following instructions show you how to install the PHP, CSS and jQuery in 3 simple steps:

PHP

Register for full access

Related Tutorials

Comments

8 responses to “Add Extra Nav Menu In Genesis Footer With Responsive Menu Icon”

  1. fotod0g13 Avatar
    fotod0g13

    Hi Brad,
    Sorry about the delayed response. If I edit out your code on my functions.php file then the top menu works fine. It opens and closes correctly as it should. I only get the conflict when I add your code so that I can have a bottom footer nav on the mobile site giving the user the ability to open the nav at the bottom of the page, rather than having to scroll, or swipe their way back to the top.
    ** Note I have set the ‘depth’ => 1, to be 7 as I want the bottom nav to show submenus on it , but I have tried it both ways ( using the number 1, or the number 7 and get the same results.

    When the above code is added to the parallax theme it causes the mobile menu in that theme to work incorrectly.

  2. fotod0g13 Avatar
    fotod0g13

    Hi Brad,
    I am assuming you are saying to replace the previous section:

    add_action( ‘genesis_footer’, ‘footer_menu’, 7 );
    function footer_menu() {
    printf( ”, genesis_attr( ‘nav-footer’ ) );
    wp_nav_menu( array(
    ‘theme_location’ => ‘footer’,
    ‘container’ => false,
    ‘depth’ => 1,
    ‘fallback_cb’ => false,
    ‘menu_class’ => ‘genesis-nav-menu’,
    ) );

    with what you posted as new.
    added it to my functions.php – cleared the cache – same results . Some kind of conflict going on that causes the top menu to open and close immediately.
    No change with the new code.

    1. Brad Dalton Avatar
      Brad Dalton

      What happens if you remove my code completely?

      1. fotod0g13 Avatar
        fotod0g13

        the default mobile menu on the theme works as it should

        1. fotod0g13 Avatar
          fotod0g13

          Hi Brad,
          I am still having problems with this code having a conflict. this is what I have tried.

          I have removed your code completely and the default responsive menu ( header right ) works perfectly when the code you are supplying is removed.

          When it is not removed the header right navigation opens and closes immediately so you are not able to select a sub menu.

          I tried to deactivate all of the plugins by adding “*1” to the plugin to see if a plugin might be the source of the conflict but the results are the same. When I add the responsive footer code to the functions.php file and the default responsive code is there a conflict occurs.

          Finally I tried replacing the default responsive menu for the Parallax theme with the information from the this tutorial:
          http://wpsites.net/web-design/add-the-latest-genesis-responsive-menu-to-your-theme/

          Interestingly when I did this and the responsive footer menu code was still written into the functions.php file the new header right responsive menu worked correctly but the responsive footer menu navigation then had the conflict – the same type as the header right was having- ie: the footer nav opens and closes to fast to select a sub-menu item.

          I would think that this might be an indication that the conflict might be css based as both the responsive footer nav, and the header right ( responsive menu ) both look to be using a lot of the same css. , and the conflict occurs even when using both of your codes together, not the default genesis responsive, and the wpsites footer responsive.

          Any help is greatly appreciated in solving this- driving me crazy.
          I can send login info to the site if you need it

          thanks
          Scott

          1. Brad Dalton Avatar
            Brad Dalton

            Hi Scott. Currently on holidays however i will try and have a look over the coming weekend.

  3. fotod0g13 Avatar
    fotod0g13

    I added this code to the Genesis(2.3.1) using the Parallax theme (1.2.2) with the latest version of WordPress ( 4.5.3) and am getting a conflict.
    ( I posted to the support form several days ago but have not heard a response so I am reposting the issue here.

    When I add this code the footer menu works fine on the mobile as it should but adding it now causes my primary menu ( header right ) to open and close immediately, so that the sub menu items are seen but cannot be clicked on.

    Here is my URL to see the site:
    http:// westchesterpowdercoating.com

    Any thoughts on why this might be happening are greatly appreciated.

    I will post to the support form again with the issue with hopes that it is working.
    fyi- I am getting a message that tells me the message has been sent to support but just not hearing back, I have had this issue before with other posts so not sure if that support form is working correctly

    1. Brad Dalton Avatar
      Brad Dalton

      Try this:

      [code]
      add_action( ‘genesis_footer’, ‘genesis_footer_menu’, 7 );
      function genesis_footer_menu() {

      genesis_nav_menu( array(
      ‘theme_location’ => ‘footer’,
      ‘container’ => false,
      ‘depth’ => 1,
      ‘fallback_cb’ => false,
      ‘menu_class’ => ‘genesis-nav-menu’,
      ) );

      }
      [/code]

Leave a Reply

Join 5000+ Followers

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