Closing Mobile Menu

Hi,

You can close it by clicking outside the menu panel.
https://cl.ly/003n0m0f3p2J/Screen%20Recording%202017-11-16%20at%2006.24%20PM.gif

You can also use the Slideout Push Content that has an X button to close the menu.

Give it a try and let me know.

I was previously using version 2.3 and had hacked up the CSS to allow slide over functionality (glad to see it is native functionality now). Initially, I had the same problem – the menu would slide over the cancel button. If I recall, I was able to work around this by adding margins to the cancel button while it was visible. Unfortunately, I do not have a backup :(. It looks like in 2.5 much of the old CSS was moved into dynamic-styles.php and changed around a bit.

What would be really cool is if only the cancel button could be animated out when using the slide over option. I’ve been trying to implement this myself, but have had little success. Rui – is there any way this could be included in a future update?

Hi,

Clicking outside the menu doesn’t work on my iPhone. However, I changed to the Push Content option and have the X – so that will work for us.

Thank you for the prompt reply.
Diana

Glad it’s sorted. Will check that situation on an iPhone.
Thanks

@undercoveralien

didn’t saw your reply between @dee987 replies.

Do you have any example I can have a look? No problem in adding the X button, don’t know why but I decided not to include it when I implemented the Slideout Over Content. Guess I can make it optional so people can decide what they like the most.

@takanakui

Sorry for the delay. So I was able to get my very hacky, ungraceful solution working with 2.5. You can see it on my website here: https://www.netris.us

All I did to achieve this is add the following code to includes/dynamic-style.php at line 404, I believe:

.mob-menu-slideout-over.show-nav-left .mobmenul-container { 
  margin-left: <?php echo $left_menu_width; ?>;
}

This pushed the cancel button out, but it was under the overlay which was not desired. I made several attempts to resolve this by setting the mobmenul-container element to a higher z-index (999999) and setting its opacity to 1, but for some reason this did not work. So I ended up just setting the overlay’s alpha channel to 0 in the plugin settings for now.

What I was trying to do is get the cancel button to animate out with the menu. It seemed easy enough on first glance, but for some reason I could never get it to work right. Any suggestions?

@undercoveralien

Can you try this version below?
https://www.dropbox.com/s/jxswl1qnjxiyb8k/mobile-menu.zip?dl=0

Hi,

I just tried the version above in the dropbox, thanks for adding the X next to the menu on mobile version. It works great once I click on the X icon. I hope clicking outside the menu to work on iPhone to close the menu.

Thanks

@manesvenom

It is expected to work. Can you provide me the site url so I can test it?

If you want to keep it private send me an email to [support AT wpmobilemenu DOT com]