Ask your WordPress questions! Pay money and get answers fast! (more info)

Close menu by clicking outside it WordPress

  • SOLVED

Hello,

I have a responsive style menu on my site. It's working nicely except I want it to close if you click outside it.

The open menu button also closes it, however when the menu is open it sits over the top of the close button. I'm unable to z-index the close button as it's in a lower z-index'd parent.

I don't want to edit the original js/jquery.

I think the original close script adds/removes 4 class names.

So, the function I need is "When the user clicks outside of the white nav area, the menu closes and resets, ready to be opened again"

Use this page for reference: http://tm.crctesting.com/who-we-are/

Cheers,
Chris.

Answers (1)

2016-03-02

Reigel Gallarde answers:

jQuery(function(){
jQuery(document.body).on('click',function(e){
e.stopImmediatePropagation();
if (jQuery('.mk-responsive-wrap').is(':visible'))
jQuery('.mk-nav-responsive-link').click();
});
jQuery('.mk-nav-responsive-link, .curved-menu').click(function(e){e.stopImmediatePropagation();});
})


this is the code.. you have to add this somewhere.... maybe you're safe to add it here on your theme... jupiter-child/js/custom.js


crc comments:

Hey Reigel,

Thanks for this, worked great. Can you please check where I have added it is the best place.

Cheers,
Chris


Reigel Gallarde comments:

yes, you have it on the right place...


crc comments:

That's great - thanks for your help.


Reigel Gallarde comments:

great! You're welcome!... don't forget to click [[LINK href="http://wpquestions.com/question/pickAWinner/id/16119"]]Vote to award prize[[/LINK]] to complete this question.. ;)