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!
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.
If you have not seen our complete guide on How To Fix Divi then I highly recommend you check that out.
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.
You’re welcome Jason, yes I will clarify that in the point about clearing cache, thank you!
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.
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.
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.
Good to know!
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.
Thanks for sharing!
I’m having an issue where icons are showing up twice. Do you happen to have any idea why?
I have not experienced, not sure! Maybe someone else will know.
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?
Hi Marcin!
I have checked the site and the icons on the menu are working fine now. Is the issue resolved now?