How to Fix Missing or Misbehaving Arrows in Max Mega Menu

Arrows are a key visual cue in Max Mega Menu, indicating which items have submenus. However, users often encounter issues where these arrows disappear, display as squares, or appear misaligned. Based on common community reports, here are the most frequent causes and their solutions.

Common Causes and Solutions

1. The "Hide Arrow" Setting is Enabled

This is the most common reason an arrow is missing on a specific menu item. This setting is managed on a per-item basis and can be easily overlooked.

Solution: Navigate to Appearance > Menus in your WordPress admin. Hover over the problematic menu item and click the blue "Mega Menu" button. In the settings panel that opens, ensure the "Hide arrow" checkbox is not selected. Save your changes.

2. Optimization Plugins Blocking Required Fonts

Max Mega Menu uses Dashicons (a WordPress font) to display many of its arrow icons. Performance optimization plugins often include an option to disable Dashicons on the frontend to save resources, which causes arrows to show as empty squares or disappear entirely.

Solution: Check your optimization plugin settings (e.g., WP Rocket). Look for an option with a name like "Disable Dashicons" or "Remove Dashicons" and ensure it is turned off. Clear all caches after making this change.

3. The Submenu Flyout is Too Narrow

Sometimes an arrow may be present but is being cut off or hidden because its container is not wide enough to display it.

Solution: In the Max Mega Menu settings, go to Mega Menu > Menu Themes and edit your theme. Locate the "Flyout Menu Width" setting and try increasing it slightly (e.g., to 260px).

4. Using Custom CSS for Advanced Control

If you have disabled Google Fonts or Dashicons for performance reasons, you may need to use custom CSS to reinstate arrows using a basic font. This is also the method to use if you want to change the arrow's size or position.

Solution for Size/Placement: To change the arrow size specifically on mobile, you can add targeted CSS. Go to Mega Menu > Menu Themes > Custom Styling and add code similar to the following:

@include mobile {
    #{$wrap} #{$menu} li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
        font-size: 30px;
    }
}

Solution for Custom Font Icons: If you need to use a system font after disabling Dashicons, you would need to write custom CSS to target the arrow elements and define a new font family and character code for the icon. This requires custom development knowledge.

Conclusion

Most arrow-related issues in Max Mega Menu can be resolved by checking a simple setting, adjusting a plugin configuration, or adding a small snippet of CSS. The most effective first step is always to verify the "Hide arrow" setting for the specific menu item in question.