How to Fix the Issue of the Removed Drop Down Icon on Divi ThemeBuilder Menu

If you’ve recently noticed the removed drop down icon on Divi ThemeBuilder menu

If you’ve recently noticed the removed drop down icon on Divi ThemeBuilder menu, you’re not alone. Many Divi users experience this issue after updates or when switching themes, especially when custom code or third-party plugins are involved. Fortunately, fixing this problem is easier than you might think. In this article, we’ll explore why this issue occurs and guide you through several practical solutions to restore the missing icons and ensure your menu functions smoothly across all devices and browsers.


Why the Removed Drop Down Icon on Divi ThemeBuilder Menu Happens

The removed drop down icon on Divi ThemeBuilder menu usually stems from one of the following causes:

  • Theme or plugin conflicts: Some third-party plugins can override default Divi styles or scripts.
  • Custom CSS overrides: If you’ve added custom code to style your menu, it might inadvertently hide the icon.
  • Missing icon fonts: Divi uses the Elegant Icons font for dropdown indicators, and if the font fails to load properly, the icon disappears.
  • Browser or cache issues: Outdated browser cache or conflicting browser extensions can prevent icons from displaying correctly.

Knowing the cause helps identify the right fix. Let's dive into some solutions.


Solutions to Restore the Removed Drop Down Icon on Divi ThemeBuilder Menu

1. Enable Font Awesome or Elegant Icons

Divi’s dropdown arrows typically rely on icon fonts. Make sure the icon fonts are properly loaded in your theme:

  • Navigate to Divi > Theme Options > Integration.
  • If you’ve disabled Icon Fonts, turn them back on.
  • Clear your site and browser cache afterward.

2. Use Custom CSS to Restore the Icon

Sometimes, the arrow is simply hidden due to a style conflict. Add this CSS to bring it back:

cssCopyEdit.et_mobile_menu .menu-item-has-children > a:first-child:after {
content: "\33";
font-family: 'ETmodules';
display: inline-block;
position: absolute;
right: 15px;
}

Paste this into Divi > Theme Options > Custom CSS or your child theme’s stylesheet. It manually re-adds the dropdown icon using Divi’s default icon set.

3. Inspect with Developer Tools

Use Chrome’s Developer Tools (Right click > Inspect) to check if the arrow is present in the HTML but hidden via CSS. Look for:

  • display: none;
  • opacity: 0;
  • visibility: hidden;

If you spot such styles, override them using !important in your CSS.

4. Check Plugin Conflicts

Temporarily deactivate third-party plugins (especially mega menu or mobile menu plugins) and check if the removed drop down icon on Divi ThemeBuilder menu appears again. If yes, re-enable plugins one by one to identify the conflict.

5. Use the Default Divi Menu Module

If you're using custom or third-party headers, consider switching back to Divi’s built-in menu module and Theme Builder settings. This often resolves compatibility issues with dropdown behavior.


Final Thoughts

The removed drop down icon on divi menu can disrupt your site’s user experience, especially on mobile devices. But with a few checks and some CSS adjustments, you can resolve this issue quickly. Always back up your site before making changes and test your menu across different browsers and screen sizes. By restoring the dropdown icons, you ensure your visitors can easily navigate your site, improving both functionality and aesthetics.

Read more