Skip to Content


This function initializes the Mmenu library with advanced settings.

JavaScript February 7, 2021




This function does not accept any parameters. Is this incorrect?

Additional Notes

Use the ID #mobilenav on the navigation ul, and the class mobilenavtrigger on the a tag parent of the icon (if using one) to toggle the open/close icon change.

Refer to the Mmenu documentation for customization of the offcanvas menu itself.

Source File

Located in /assets/js/modules/helpers.js on line 453.

No Hooks

This function does not have any filters or actions available. Request one?
nebula.mmenus = async function(){
    //Ensure the offcanvas nav element exists
    let offcanvasNav = jQuery('#offcanvasnav'); //This is essential, so check it here in case this function is called manually
    if ( offcanvasNav.length ){
        let offcanvasNavTriggerIcon = jQuery('a.offcanvasnavtrigger i');

        let navbars = []; //Think of these as "rows" in the Mmenu panel

        //Add the search navbar
            position: 'top',
            content: ['searchfield'] //Add a search field to this navbar

        //Add the tab navbar for the utility menu (if it exists)
        if ( jQuery('#utility-panel').length && (!jQuery('#utility-nav').hasClass('no-mobile') && !jQuery('#utility-panel').parents('.no-mobile').length) ){ //If the utility menu exists and is not manually disabled from the offcanvas menu via a class
                position: 'top',
                type: 'tabs',
                content: [
                    '<a href="#main-panel">Main Menu</a>',
                    '<a href="#utility-panel">Other Links</a>'

        //Add the title navbar
            position: 'top',
            content: ['prev', 'title'] //This defaults to "Menu". Can it be changed?

        const offcanvasMmenu = new Mmenu('#offcanvasnav', {
            wrappers: ['wordpress'], //This handles the "current-menu-item" selected class name automatically
            extensions: [
                'pagedim-black', //Dim the page when Mmenu is open ('-white' or '-black')
                'fx-menu-slide', //Subtly animate the menu items in too //See if this is laggy on mobile
                'multiline', //Long link text wraps to multiple links
                'shadow-panels', //Add a shadow to sub-nav panels
            offCanvas: true, //Enable the offcanvas API (for opens and closes)
            pageScroll: { //Enable smooth scrolling. May resolve #1967– if so keep it, if not remove it.
                scroll: true,
                update: true
            backButton: {
                close: true //Close the offcanvas menu when the browser's back button is used
            keyboardNavigation: { //This is not yet working...
                enhance: true //Allow for enhanced keyboard navigation such as the "escape" key closing the menu
            lazySubmenus: {
                load: true //Lazy load the sub-nav panels
            counters: true, //Add counters to show the number of sub-nav items
            iconPanels: true, //Show a small part of the parent panels (for sub-nav items)
            navbars: navbars,
            searchfield: {
                //panel: true, //This shows all search results in a single panel, but is causing an error in Mmenu 8.5.21
                showSubPanels: false
            setSelected: {
                hover: true
            hooks: {
                'open:start': function(){ //When Mmenu has started opening

                    if ( typeof jQuery.tooltip !== 'undefined' ){

                    nebula.timer('(Nebula) Mmenu', 'start');
                'close:start': function(){ //When Mmenu has started closing
                    ga('send', 'timing', 'Mmenu', 'Closed', Math.round(nebula.timer('(Nebula) Mmenu', 'lap')), 'From opening mmenu until closing mmenu');
        }, {
            searchfield: {
                clear: true,
                form: {
                    method: 'get',
                input: {
                    name: 's',

        nebula.dom.document.on('click', '#offcanvasnav .mm-menu li a:not(.mm-next)', function(){
            ga('send', 'timing', 'Mmenu', 'Navigated', Math.round(nebula.timer('(Nebula) Mmenu', 'lap')), 'From opening mmenu until navigation');


To override or disable this JavaScript function, simply redeclare it with the exact same function name.

nebula.mmenus = function(){
    //Write your own code here, leave it blank, or return false.