Updated on 06 Sep 2022
This Pro tutorial provides the steps to implement Mmenu Light for a sliding OffCanvas mobile menu in Bricks.
Step 1
If you haven't already, create a menu at Appearance → Menus.
Sridhar Katakam
Sridhar Katakam is a WordPress expert with more than 12 years of experience. Sridhar is the founder of WPDevDesign and BricksLabs. He lives in Melbourne, Australia.
Tom Rushworth
Hi Guys,
Great tut, got it working.
Don’t suppose you know how to adapt your code to include the search field seen here: https://mmenujs.com/docs/addons/searchfield.html
Sridhar Katakam
Hi Tom. See my reply to Christian below.
Christian Strand
Hi sorry for all the questions. How can we add the various add-ons as listen on https://mmenujs.com/examples.html i.e. the search field.
Sridhar Katakam
Hi. For that, the full version of mmenu should be used, not mmenu light. I tried the full version and find it buggy. You can see it here: https://bricks-mmenu.wpdemo.dev/. Clicking the submenu parent item arrow does not slide open the submenu. Also, after closing the offcanvas it seems to stutter.
I suggest you use the OffCanvas element in our BricksExtras plugin instead.
https://bricksextras.com/docs/offcanvas/
https://bricksextras.com/docs/slide-menu/
As you probably observed, it is not possible to have sliding menus with BricksExtras. You can have submenus expand and collapse vertically.
Christian Strand
Hi. What would I have to do to set this as the default menu for all screen sizes?
Sridhar Katakam
Hi,
Updated the tutorial to answer your question.
P Zeylstra
Hello Sridhar, I’ve now implemented it with a breakpoint at 1400 px. However, I think css (or js?) needs adjustment to show the text in the menu. The slight out is working at 1400, but no menu items to show. What do I need to change to achieve that?
Sridhar Katakam
Can you provide the URL?
John McBade
I can’t get this to work. I have tried adding the code in Bricks and in WS Codebox. Clicking on the hamburger yields this console error:
Uncaught ReferenceError: MmenuLight is not defined
http://wp-bricks-1-5:81/#:477
EventListener.handleEvent* http://wp-bricks-1-5:81/#:476
wp-bricks-1-5:81:477:16
I’m not sure why the code is not recognized 🙁
John McBade
Sridhar,
How would I do all these steps that use code and such if I wanted to use WS Codebox only?
Maybe that would be useful since I have it and use it?
David Browne
Hi John,
I’ve just tested with Codebox without issue, pasting the code exactly the same way.
From that error, it sounds like you’re missing the minified mmenu-light.js (from the github link in the tutorial) if you had accidentally missed out that step, and used the second JS only, that’s the error that would be showing. (or if you’d included the ‘script’ open/close tags, which wouldn’t be needed in WPCodebox if ‘JS’ has already been selected.)
That’s the first thing to check, otherwise if you can share a URL where it’s not working, we can inspect the page and find out what is happening.
Screenshot if it helps.. https://i.ibb.co/Bw0n0y0/Screen-Shot-2022-08-29-at-4-05-44-pm.png (notice the JS at the very top of line 1, JS from step 2 in the tutorial)
Sridhar Katakam
Does it work if you follow the tutorial as is w/o using WPCB?
Dizajn
Is it easier to create videos?
Sridhar Katakam
Perhaps for some people, but not for me.