Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Fix The Number 3 Or Letter a Showing In The Divi Menu

Nelson Miller Profile Orange
In this tutorial I will show you how to fix the number 3 that sometimes shows in the Divi menu and explain why this happens.

▶️ Please watch the video above to get all the exciting details! 👆

Why Is This Happening?

Here is what is going on if are noticing a “3” in the submenu dropdown icon or an “a” instead of the mobile hamburger menu. Both the dropdown icon in the desktop menu and the hamburger menu on mobile use a pseudo class to display the icon using the CSS “content” property. They both also use the ETModules font family, which is the font used for the icons and user interface in Divi. These theme icons are located in one font file called modules.ttf. When the page loads, the font family is either blocked by the browser, delayed loading, or is not available, so the icons use their fallback code version instead. This explains why you may see a “3” or “a” instead of the icon. Sometimes this only occurs for a split second while the page loads, other times it can remain there.

Below is an example of the code used in Divi to display the dropdown and hamburger icon. 

Desktop Submenu Dropdown Icon

.et-menu .menu-item-has-children>a:first-child:after {
    content: "3";
    font-family: ETmodules;
}

Mobile Hamburger Menu Icon

.mobile_menu_bar:before {
    content: "a";
    font-family: ETmodules;
}

Troubleshooting Steps For  The Problem

The issues mentioned can occur for a number of reasons. Please follow the steps below to solve it. If you are still experiencing the issue after these steps, you can proceed to the permanent fix below.

 1. Rule Out Slow Internet

The issue could be as simple as a slow internet connection. Be sure to check your current speeds and check other devices.

2. Check Divi Hosting Server/Requirements

The issue could also be caused by a slow hosting server. Be sure to check your Divi>Support Center>System Status and make sure your server meets the Divi requirements.

3. Check SSL Certificate/HTTPS Differences

The issue could be caused by a missing SSL certificate. Make sure you have the padlock in the top left corner of your browser.

Check all your links and content to make sure you do not have any mixed content errors, meaning everything uses https and not a mix of http. You may need to run a search and replace to be sure.

A practical place to start would be to check  any custom links in your menu to make sure they are “https” to match the site domain.

It is unlikely, but you can also check some WordPress settings. There are two fields in WordPress>Settings>General for WordPress address and Site Address. These should be the same, and only changed if you fully understand it. So just double check that these are indeed the same.

 4. Try Different Browsers

The issue is often due to some browsers. Try checking all the main browsers like Chrome, Firefox, Edge, Safari. Ask a friend or colleague to also check. If you are the only one facing the issue, then it is probably cache.

5. Clear Your Cache

If you have not done this yet, try clearing all your cache (browser, plugin, server, CDN). Press Control/Shift/R to do a hard refresh. Also try deactivating any caching plugin, those have been known to conflict with Divi’s own performance settings.

6. Check Console For Errors

Check to see if there are any errors in the Console. You can do this from the browser developer tools by right-clicking and selecting “Inspect” and then clicking on the “Console” tab. If there are any errors, they will appear in red. You can try searching online for whatever the error message says.

7. Disable Divi Performance Settings

Go to Divi Theme Options>General>Performance and turn off the Dynamic Icons setting. You can also try turning off the Dynamic CSS setting, just to test and compare.

Permanent Solution: Preload Divi Icons As Fonts

If you want to make sure this issue is resolved 100% and never happens again, you should take this more aggressive step. It is easy, all you need to do is copy the following code snippet in your Divi Theme Options>Integration>Add code to the header of your blog code box.

<link rel="preload" href="wp-content/themes/Divi/core/admin/fonts/modules/all/modules.ttf" as="font" type="font/ttf" crossorigin= "anonymous">

Explanation Of Code

<link>
The code we are adding is a <link>element, used to specify the relationship between the current document (the Divi website <head>)and an external resource (the font stylesheet). 

rel=”preload”

The rel attribute defines the relationship of the linked document to the current document. So in this case, a “rel” value of “preload” indicates that the browser should preload this resource. This value lets you declare the fetch request in the HTML’s <head>, specifying that the page will need this resource very soon and should start loading it early before the browser’s main rendering begins. This makes sure the font family is available earlier.

href=

This is the link destination, which in our case is an absolute URL to the location of the icon font family within the Divi theme code. You could see this for yourself by going to content>themes>Divi>core>admin>fonts>modules>all>modules.ttf. If you open the file it looks like this:

Divi modules truetype fonts

as=”font” type=”font/ttf”

These attributes tell the browser to download this resource as a font and correct MIME type, which helps to prioritize the resource in the loading queue.

crossorigin= “anonymous”

The crossorigin attribute sets the mode of the request to a CORS request, which is a standard mechanism used to check whether it is safe to permit the sharing request for the resource. The anonymous value is default and means the request will be performed, and no authentication credentials are needed.

How To Fix Divi Issues and Problems Tutorial by Pee Aye Creative

If you have not seen our complete guide on How To Fix Divi then I highly recommend you check that out. 

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

14 Comments

Comments By Others

  1. Mad Dog

    Thanks for this. I periodically come back to refer to this. It happens to me when I work on a client site and migrate the dev version to the live site using UpDraftPlus. For some reason it tends not to convert one goofy entry in the options table causing this. A quick Better Search and Replace and it’s fixed.

    THANKS!

    Reply
  2. Marcin

    Hi,
    I usw Divi an WPRocket. I have “/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.ttf” in WP ROcket Fonts-Preload and in the Header code. But in Chrome are displayed 3 as arrow U as Search-Icon 🙁

    Site: https://wasserschildkroeten-auffangstation.de/
    Do you have a idea?

    Reply
    • Hemant Gaba

      Hi Marcin!

      I have checked the site and the icons on the menu are working fine now. Is the issue resolved now?

      Reply
  3. Dani Ellis

    I’m having an issue where icons are showing up twice. Do you happen to have any idea why?

    Reply
  4. Mad Dog

    Thanks for all your tips and snippets. You’re always my first stop. I’ve had this happen several times when I migrate dev sites to go live and the old ones didn’t have SSL certs. Usually turns out doing a search and replace to make sure everything is https:// does the trick.

    Reply
  5. Alex

    For me this works well with WP-Rocket for the moment..

    Put /wp-content/themes/Divi/core/admin/fonts/modules/all/modules.ttf in the Font Preload under the Fill Cache Tab and it works now.

    Thank you.

    Reply
  6. Paul Thomas

    Hi,

    I used this code and it was giving errors when I used dev tools inspection – file does not exist.

    I had to add /at the start of the href or use absolute path with full domain name to make it work.

    Reply
    • Hemant Gaba

      Hey Paul,

      Divi had made a lot of updates after this guide was released so you don’t need to inject this code now. You can check the performance tab in Divi Theme Options for the icon related issue now.

      Reply
  7. Jason

    Thanks for this, and all of your posts, Nelson! When this happens on one of my client sites, it usually resolves when I clear the Static CSS File Generation cache.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart