How to fix Divi number 3 (three) flashing in dropdown menu

divi menu dropdown arrow

If you're a user of the WordPress Divi theme by "Elegant Themes" and are frustrated by the number "3" flashing up instead of the dropdown submenu arrow, how do you fix it?

The problem

The issue can arise when you create a new website with Divi and have menu items that you want to include in a drop-down sub-menu. If your hosting server isn't lightning fast, you may find yourself scratching your head when your site first loads on the screen. The reason being that that number "3" briefly pops up prior to the small dropdown arrow icon appearing in its place. This can be especially frustrating if you've just built a site for a client and they've asked you to fix it. The lead image (above) shows the page after loading and the one below illustrates what you see as the page is being rendered. In short, the number three appearing first is a font-related problem because your font isn't loading before other items on the page.

divi menu 3 three appearing

How to fix

Fortunately, there's an easy fix that doesn't require a plugin, just a simple piece of code added to the <head> section of your Divi website which contains a simple instruction to prioritise the preloading of your font.

 

1. Log in to the admin area of your Divi/WordPress and select the theme's "options"

divi theme options

 

2. Go to the Integration tab and select it

 

integration

 

3. Ensure that Divi's header code option is enabled and paste the following code in the area that says "Add code to the < head > of your blog"

<!-- Preloading font to fix menu icon flashing 3 -->
<link rel="preload" href="/wp-content/themes/Divi/core/admin/fonts/modules.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<!-- Preloading font to fix menu icon flashing - end -->

 

divi header code

 

Once you've added it, save and close and your problem should be fixed :)