If you’re a user of the WordPress theme 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 the 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.
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”
2. Go to the Integration tab and select it
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 -->
Once you’ve added it, save and close and your problem should be fixed 🙂
Further help
If you need help with your website’s SEO, we provide an informal consulting service to help you get the results you’re looking for.