• 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

Hide Genesis Responsive Menu On Menu Item Click

This solution enables you to hide the Genesis responsive menu when any menu item in the drop down toggle menu is clicked. Once the menu item is clicked, the entire drop down is closed and the responsive menu icon ( hamburger menu ) can then be opened again as seen in the demo video.

Demo Video

In this case, the menu items for scroll points on the front page are clicked resulting in the responsive menu closing.

Tested using the Altitude Pro child theme by StudioPress however will work in any StudioPress child theme. Coded to load on the front page only.

Installation Steps

There’s 2 steps :

  1. # Upload the file named menu.js to your child themes root directory like this :
  2.  
    Step 1

  3. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.
  4.  
    Step 2

Download Folder

Accordion & Toggle jQuery Scroll Nav Menu

Reader Interactions

Comments

  1. Tim Baggaley says

    January 18, 2022 at 6:26 pm

    Hello Brad,
    I’m using the Genesis One-Pager child theme and because this uses local links I really need the responsive menu to close on click. I’ve tried out your code here but I can’t get it to work. Do I need something different for One-Pager?

    You can see my website at: https://timbaggaley.com/

    Thanks, Tim

    Log in to Reply
    • Brad Dalton says

      January 18, 2022 at 6:37 pm

      Do you have some sort of caching active or CSS min? Is One Pager a StudioPress theme?

      Log in to Reply
      • Tim Baggaley says

        January 18, 2022 at 7:03 pm

        Yes, I do have caching and CSS min active. One-Pager is not a StudioPress theme:

        Log in to Reply
        • Brad Dalton says

          January 19, 2022 at 12:20 am

          Turn caching and minification off please.

          The code only works in StudioPress themes. Any work required to use the code in non SP themes is billable.

          Tested in Genesis Sample version 3.4.1 and earlier and works.

          Log in to Reply
  2. Jacob Vanderpol says

    August 18, 2021 at 1:43 am

    Hi,

    This solution does not work on the latest Genesis Version (3.3.3) with the Genesis Sample child theme. Can you provide an updated version that does work in this set-up?

    Thanks!

    Log in to Reply
    • Brad Dalton says

      August 18, 2021 at 1:55 am

      Hi Jacob. What version of Genesis Sample are you using? Also, 3.3.5 is the latest version of Genesis.

      Log in to Reply
      • Jacob Vanderpol says

        August 18, 2021 at 1:58 am

        Version 3.4.0.

        Inspector in Chrome shows the following error:

        Uncaught TypeError: $ is not a function
        at menu.js?ver=3.4.0:8
        at dispatch (jquery.min.js?ver=3.6.0:2)
        at v.handle (jquery.min.js?ver=3.6.0:2)

        Log in to Reply
        • Brad Dalton says

          August 18, 2021 at 2:21 am

          Please use this latest version which has 2 versions in the file. One for AP and one for Sample. Just tested on latest versions.

          Log in to Reply
          • Jacob Vanderpol says

            August 18, 2021 at 2:30 am

            Works great! Thanks!

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.