Change Menu Label Text on Beaver Builder Menu Module

April 11, 2025| 0 comments

By default the Beaver Builder menu label text is set to ‘MENU’ without no option to change the text.

Here is a guide to change the menu label text on mobile devices less than 768px. On this example the label is changed to ‘Parent Menu’, just change the menu name to what you need.

Create the menu, and add the javascript in the modules advanced settings.

Then add the javascript to the advanced tab, JavaScript settings:

jQuery(function($) {
  function updateMobileMenuLabel() {
    $('.fl-menu.fl-menu-responsive-toggle-mobile').each(function() {
      const $menu = $(this);
      const $labelSpan = $menu.find('.fl-menu-mobile-toggle-label');

      if ($(window).width() < 768) {
        if (!$labelSpan.hasClass('custom-label-added')) {
          $labelSpan.text('Parent Menu').addClass('custom-label-added');
        }
      } else {
        if ($labelSpan.hasClass('custom-label-added')) {
          $labelSpan.text('Menu').removeClass('custom-label-added');
        }
      }
    });
  }

  updateMobileMenuLabel();
  $(window).on('resize', updateMobileMenuLabel);
});