How To Fix The Number 3 Or Letter a Icons Showing In The Divi Menu Tutorial by Pee Aye Creative

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

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.

Categories: Divi Maintenance Tutorials

Weirdness in My Divi Menu?

When you have a Divi menu with submenu items under it, Divi automatically adds a dropdown menu icon to indicate that the submenu exists. But sometimes you may experience a weird issue with a number “3” instead of the dropdown arrow icon, or an “a” instead of the mobile hamburger menu. Why would this happen? How to solve it? If you are facing this issue, this tutorial will explain why it is happening and give you some solutions.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Subscribe On YouTube

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:

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.

How To Fix Divi Tutorial

Last updated May 24, 2022 @ 1:20 am

That's it!

I hope you have enjoyed learning How To Fix The Number 3 Or Letter a Showing In The Divi Menu. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

Jason on May 24, 2022 at 9:19 am

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
- Nelson Lee Miller (aka The Divi Teacher) on May 24, 2022 at 10:32 am
  
  You’re welcome Jason, yes I will clarify that in the point about clearing cache, thank you!
  Reply