Mmenu Light in Bricks

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.

Step 2

This is a Pro members-only tutorial.

To get full access, login below or sign up for a Pro Account

  • 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:

  • Christian Strand

    Hi sorry for all the questions. How can we add the various add-ons as listen on i.e. the search field.

  • Christian Strand

    Hi. What would I have to do to set this as the default menu for all screen sizes?

  • 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?

  • 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
    EventListener.handleEvent* http://wp-bricks-1-5:81/#:476

    I’m not sure why the code is not recognized ๐Ÿ™

    • John McBade


      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?

      • A
        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.. (notice the JS at the very top of line 1, JS from step 2 in the tutorial)

    • A

      Does it work if you follow the tutorial as is w/o using WPCB?

  • Is it easier to create videos?

Leave your comment