Branditechture Blog
Close this search box.

One-Page Navigation: How To Collapse WordPress Nav Menu on Click

Share this article:


A single-page or one-page website needs its mobile nav menu tray to automatically collapse on click. However, it doesn’t always happen by default in most cases.

For example, if you build a one-page website using WordPress and Elementor Pro, Elegant themes, or Elements Kits, chances are good that you would run into the shown problem below;

[Click on video to play]

As you can see in the video above, the menu tray does not collapse after clicking on a menu item. This problem is not limited to WordPress headers alone. It can also occur if you use a Bootstrap template.

In this post, I will share with you a wonderful jQuery snippet that would help auto collapse the menu tray by mimicking a click event on the [X] icon when a menu item is clicked.

See the final result below;

[Click on video to play]


Subscribe for updates


So, Here is the jQuery Snippet to automatically collapse the nav menu tray on menu click;

For WordPress

Install and activate any plugin that will enable you to add custom JS codes to your website. I recommend Simple Custom CSS and JS plugin.

Copy and paste the following code into your custom JS field.

jQuery(document).ready(function( $ ){
$("body").on("click",".menu-item",function(){$(".menu-close")[0].click();}); }); })(jQuery);

Variables to take care of;

There are just two variables you need to change;

.menu-item = Change it to the CSS class name of your menu items

.menu-close = Change it to the CSS class name of your mobile menu’s close icon.

For an HTML/Bootstrap Template


jQuery(document).ready(function( $ ){ (function($){ $(window).on("load",function(){ $("body").on("click",".menu-item",function(){$(".menu-close")[0].click();}); }); })(jQuery); });


Please comment below if it worked for you.

Thank for reading!

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments

Related 👇🏽


Subscribe for updates

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
100% Free SEO Tools - Tool Kits PRO