WordPress：如何保存DevTools调试的修改？Mega Menu子菜单图标异常

Hey there, I’ve dealt with this exact Mega Menu frustration before—when the plugin won’t save your icon settings and you have to hack it via DevTools just to see the right icons. You’ve already figured out the correct HTML tweaks, so let’s lock those changes in permanently with these reliable methods:

Option 1: Use Mega Menu’s Built-in Custom HTML (Recommended) #

Most Mega Menu versions let you edit individual menu items’ raw HTML directly—this is the simplest fix if it’s available:

• Head to Appearance > Menus in your WordPress dashboard
• Find each of those 5 problematic submenu items and expand them
• Look for a setting like Custom HTML or Menu Item Content (location varies a bit by plugin version)
• Paste in the full modified HTML you tested in DevTools, like this:

  <a href="http://newlayouthomepage1.bluebirdpackaging.com/product-category/custom-printed-apparel-packaging-boxes-wholesale/" class="item_link with_icon" tabindex="44">
    <i class="im-icon-arrow-right-2"></i>
    <span class="link_content">
      <span class="link_text"> Apparel Boxes </span>
    </span>
  </a>
  

• Save your menu, then refresh the front end to check if the icons show up

Option 2: Add Filter Hooks to Your Child Theme’s functions.php #

If the custom HTML option isn’t there, you can use WordPress hooks to tweak the menu output without touching plugin files:

1. Open your child theme’s functions.php file (never edit the parent theme directly—updates will wipe your changes!)
2. Drop in this code, adjusting the match conditions to target your specific menu items:

   // Swap 'disable_icon' class with 'with_icon' for target menu items
   add_filter('nav_menu_link_attributes', 'fix_megamenu_icon_class', 10, 3);
   function fix_megamenu_icon_class($atts, $item, $args) {
       // Match items by URL (adjust this to match your menu item URLs)
       if (strpos($item->url, 'apparel-packaging') !== false) {
           $atts['class'] = str_replace('disable_icon', 'with_icon', $atts['class']);
       }
       return $atts;
   }
   
   // Insert the arrow icon before the menu item content
   add_filter('walker_nav_menu_start_el', 'add_megamenu_arrow_icon', 10, 4);
   function add_megamenu_arrow_icon($item_output, $item, $depth, $args) {
       // Same match condition as above
       if (strpos($item->url, 'apparel-packaging') !== false) {
           $icon = '<i class="im-icon-arrow-right-2"></i>';
           $item_output = str_replace('<span class="link_content">', $icon . '<span class="link_content">', $item_output);
       }
       return $item_output;
   }
   

3. Save the file, then refresh your site. To target all 5 items, you can add more strpos checks or match by menu item title using $item->title == 'Your Menu Item Name'

Option 3: Override Mega Menu’s Template File (Advanced) #

If the above methods don’t work, you can safely override the plugin’s template file via your child theme:

• Locate the Mega Menu template files in wp-content/plugins/megamenu/templates/
• Find the file that outputs individual menu items (usually menu-item.php)
• Copy this file to your child theme, creating the same folder structure: wp-content/themes/your-child-theme/megamenu/templates/menu-item.php
• Open the copied file, find the <a> tag line, change disable_icon to with_icon, and add the <i class="im-icon-arrow-right-2"></i> inside the link
• Save the file and refresh your site to see the changes

Quick Notes to Keep in Mind #

• If you use a caching plugin, clear the cache after making changes—old cached content might hide your fixes
• Double-check that the im-icon-arrow-right-2 font icon is properly loaded in your theme (if it’s missing, the icon will show as a blank box)
• Avoid editing core plugin files directly—updates will erase your work. Stick to child themes or hooks for long-term fixes

内容的提问来源于stack exchange，提问作者Usman khn