Sage and mmenu

Hi Sagers,

I’m having some trouble locating where I’ve gone wrong setting up mmenu.js on a new Sage install. When I have the JavaScript directly in my header.blade.php, the mmenu works as it should. As soon as I move it into my common.js and rebuild, it no longer works. Any ideas what I’m doing wrong here? When I view the compiled JS, it looks like this is likely happening because the imported scripts are showing under the document.addEventListener I’ve added to the common.js init();

My steps were:

  1. Installed dependencies:
    npm install mburger-css
    npm install mmenu-js
    npm install mhead-js

  2. Updated common.js:

// Import Scripts
import ‘mmenu-js’;
import ‘mhead-js’;

export default {
init() {

// Fonts
window.WebFontConfig = {
  custom: {
    families: ['Nexa&display=swap'],
  google: {
    families: ['PT Serif:400'],
(function(d) {
  var wf = d.createElement('script'), s = d.scripts[0];
  wf.src = '';
  wf.async = true;
  s.parentNode.insertBefore(wf, s);

// Menu
  'DOMContentLoaded', () => {
    new Mmenu( '#my-menu', {
      'slidingSubmenus': false,
      'extensions': [
      'navbars': [
          'position': 'top',
          'content': [
          'position': 'bottom',
          'content': [
            '<i class=\'fab fa-facebook-f\'></i>',
            '<i class=\'fab fa-twitter\'></i>',
            '<i class=\'fab fa-instagram\'></i>',
    }, {
      offCanvas: {
        'clone': true,
    // Header
    new Mhead( '#my-header', {
      'unpin': 100,
      'pin': 100,
      'tolerance': 4,

finalize() {


main.js is already wrapping all is scripts in a document ready check, so you may be attempting to bind your script to an event that’s already passed and hence never triggers:

@alwaysblank Thank you! That was it :slight_smile: Appreciate your speedy help!

1 Like

This topic was automatically closed after 42 days. New replies are no longer allowed.