Updated on 06 Sep 2022
This Pro tutorial provides the steps to implement Mmenu Light for a sliding OffCanvas mobile menu in Bricks.
If you haven't already, create a menu at Appearance → Menus.
This is a Pro members-only tutorial.
To get full access, login below or sign up for a Pro Account
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.
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
Hi Tom. See my reply to Christian below.
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.
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.
As you probably observed, it is not possible to have sliding menus with BricksExtras. You can have submenus expand and collapse vertically.
Hi. What would I have to do to set this as the default menu for all screen sizes?
Updated the tutorial to answer your question.
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?
Can you provide the URL?
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
I’m not sure why the code is not recognized 🙁
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?
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)
Does it work if you follow the tutorial as is w/o using WPCB?
Is it easier to create videos?
Perhaps for some people, but not for me.
Yes, add me to your mailing list