Override Superfish’s Mobile Menu Trigger in Drupal

The Superfish integration for Drupal works nicely for all kinds of menus from Mega Dropdowns down to Mobile. What bothered me with Superfish’s Mobile Menu implementation is that the Button that opens the Mobile Accordion (.sf-accordion-toggle) is always named after the name of the actual menu and normally can’t be overridden.

One possible approach to overcome this is using plain CSS to hide the span and place something different inside the link tag using the content property. I don’t like that idea too much so instead I tried figuring out how to change this with JavaScript. Turned out it’s not possible to simply selecting the DOM element and changing its value because the original value gets re-assigned anytime you resize you browser windows. What does work is overriding the Superfish behavior. I just copied it over from superfish.js form the Superfish Module into my theme’s JS and there I set my desire value, like so: options.plugins.smallscreen.title = '<i class="glyphicon glyphicon-menu-hamburger "/><span>MenĂ¼</span>';

Here’s the entire function:

// Override the superfish Behevior to add our own 
// custom Mobile Menu Trigger Title // (options.plugins.smallscreen.title)
(function ($) {
  Drupal.behaviors.superfish = {
    attach: function (context, settings) {
      // Take a look at each list to apply Superfish to.
      $.each(settings.superfish || {}, function(index, options) {
        // Process all Superfish lists.
        $('#superfish-' + options.id, context).once('superfish', function() {
          var list = $(this);
          options.plugins.smallscreen.title = '<i class="glyphicon glyphicon-menu-hamburger "/><span>MenĂ¼</span>';
          // Check if we are to apply the Supersubs plug-in to it.
          if (options.plugins || false) {
            if (options.plugins.supersubs || false) {

          // Apply Superfish to the list.

          // Check if we are to apply any other plug-in to it.
          if (options.plugins || false) {
            if (options.plugins.touchscreen || false) {
            if (options.plugins.smallscreen || false) {
            if (options.plugins.automaticwidth || false) {
            if (options.plugins.supposition || false) {
            if (options.plugins.bgiframe || false) {

Leave a Reply